Tailwind CSS Ecommerce Headers Blocks

All Blocks
Ecommerce
Ecommerce Headers

Ecommerce Headers

Ecommerce header blocks for storefront and marketplace navigation with cart, account, location, and signed-in or signed-out actions.

The navbar combines primary links with location, account, and cart actions in the same row.

<header class="flex flex-col lg:flex-nowrap z-50 bg-navbar">
                    
                    <div class="bg-navbar-1">
                      <div class="max-w-340 flex justify-between w-full mx-auto py-3 px-4 sm:px-6 lg:px-8">
                        <div class="flex items-center gap-x-5">
                          <button type="button" class="flex items-center gap-x-1 text-start font-medium text-xs text-navbar-nav-foreground hover:text-muted-foreground-hover focus:outline-hidden focus:text-muted-foreground-focus" data-hs-overlay="#hs-pro-shmnlcm">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>
                            Specify the address
                          </button>
                        </div>

<ul class="flex flex-wrap items-center gap-3">
                          <li class="inline-flex items-center relative text-xs text-muted-foreground-1 ps-3.5 first:ps-0 first:after:hidden after:absolute after:top-1/2 after:inset-s-0 after:inline-block after:h-2.5 after:border-s after:border-line-4 after:rounded-full after:-translate-y-1/2 after:rotate-12">
                            <button type="button" class="flex items-center gap-x-1.5 text-start text-xs text-muted-foreground-1 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" data-hs-overlay="#hs-pro-shnrsm">
                              <img class="shrink-0 size-3.5 rounded-full" src="../../../assets/vendor/svg-country-flags/png250px/us.png" alt="English">
                              English · USD
                            </button>
                          </li>
                          <li class="hidden sm:inline-flex items-center relative text-xs text-muted-foreground-1 ps-3.5 first:ps-0 first:after:hidden after:absolute after:top-1/2 after:inset-s-0 after:inline-block after:h-2.5 after:border-s after:border-line-4 after:rounded-full after:-translate-y-1/2 after:rotate-12">
                            <a class="text-xs text-muted-foreground-1 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">
                              Help
                            </a>
                          </li>
                          <li class="hidden sm:inline-flex items-center relative text-xs text-muted-foreground-1 ps-3.5 first:ps-0 first:after:hidden after:absolute after:top-1/2 after:inset-s-0 after:inline-block after:h-2.5 after:border-s after:border-line-4 after:rounded-full after:-translate-y-1/2 after:rotate-12">
                            <a class="text-xs text-muted-foreground-1 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">
                              Mobile app
                            </a>
                          </li>
                          <li class="hidden sm:inline-flex items-center relative text-xs text-muted-foreground-1 ps-3.5 first:ps-0 first:after:hidden after:absolute after:top-1/2 after:inset-s-0 after:inline-block after:h-2.5 after:border-s after:border-line-4 after:rounded-full after:-translate-y-1/2 after:rotate-12">
                            
                            <button type="button" class="hs-dark-mode-active:hidden flex hs-dark-mode items-center gap-x-1.5 text-sm text-muted-foreground-1 hover:text-muted-foreground-1 focus:outline-hidden focus:text-muted-foreground-1" data-hs-theme-click-value="dark">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg>
                              <span class="sr-only">Dark mode</span>
                            </button>
                            <button type="button" class="hs-dark-mode-active:flex hidden hs-dark-mode items-center gap-x-1.5 text-sm text-muted-foreground-1 hover:text-muted-foreground-1 focus:outline-hidden focus:text-muted-foreground-1" data-hs-theme-click-value="light">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>
                              <span class="sr-only">Light mode</span>
                            </button>
                            
                          </li>
                        </ul>
                      </div>
                    </div>

<div class="md:w-full order-2 md:grow md:w-auto">
                          <div class="relative flex basis-full items-center gap-x-1 md:gap-x-3">
                            
                            <div class="hs-dropdown [--adaptive:none] [--auto-close:inside] md:inline-block">
                              
                              <button id="hs-pro-shmnctdm" type="button" class="hs-dropdown-toggle relative py-[7px] sm:py-2 sm:py-2.5 px-3 flex items-center gap-x-1.5 text-sm text-start bg-primary border border-primary-line text-primary-foreground rounded-full hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                <svg class="hs-dropdown-open:hidden shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
                                <svg class="hs-dropdown-open:block hidden shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                Catalog
                              </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 opacity-0 w-full hidden z-20 top-full inset-s-0 min-w-60 bg-dropdown border border-dropdown-line shadow-xl before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shmnctdm">
                                
                                <div class="max-w-340 w-full mx-auto py-2 md:py-4 px-4 sm:px-6 lg:px-8">
                                  <select id="hs-catalog-sidebar-nav-select" class="hidden" data-hs-select='{
                                    "placeholder": "Select option...",
                                    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"me-2\" data-icon></span><span class=\"text-foreground\" data-title></span></button>",
                                    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 pe-9 flex items-center text-nowrap w-full cursor-pointer bg-surface text-surface-foreground rounded-lg text-start text-sm",
                                    "wrapperClasses": "sm:hidden mb-4",
                                    "dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 bg-select border border-select-line rounded-lg shadow-xl overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                    "optionClasses": "hs-selected:bg-select-item-active py-2 px-3 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                                    "optionTemplate": "<div class=\"flex items-center\"><div class=\"me-3\" data-icon></div><div class=\"text-foreground\" data-title></div></div>",
                                    "extraMarkup": "<div class=\"absolute top-1/2 inset-e-3 -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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></div>"
                                  }'>
                                    <option value="#mega-menu-catalog-tab-1" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"20\" x=\"5\" y=\"2\" rx=\"2\" ry=\"2\"/><path d=\"M12 18h.01\"/></svg>"
                                    }' selected>Electronics</option>
                                    <option value="#mega-menu-catalog-tab-2" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z\"/></svg>"
                                    }'>Clothing</option>
                                    <option value="#mega-menu-catalog-tab-3" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 20h10\"/><path d=\"M10 20c5.5-2.5.8-6.4 3-10\"/><path d=\"M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z\"/><path d=\"M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z\"/></svg>"
                                    }'>House & Garden</option>
                                    <option value="#mega-menu-catalog-tab-4" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 12h.01\"/><path d=\"M15 12h.01\"/><path d=\"M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5\"/><path d=\"M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1\"/></svg>"
                                    }'>Baby Care</option>
                                    <option value="#mega-menu-catalog-tab-5" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 6h3\"/><path d=\"M17 6h.01\"/><rect width=\"18\" height=\"20\" x=\"3\" y=\"2\" rx=\"2\"/><circle cx=\"12\" cy=\"13\" r=\"5\"/><path d=\"M12 18a2.5 2.5 0 0 0 0-5 2.5 2.5 0 0 1 0-5\"/></svg>"
                                    }'>Home appliances</option>
                                    <option value="#mega-menu-catalog-tab-6" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11.1 7.1a16.55 16.55 0 0 1 10.9 4\"/><path d=\"M12 12a12.6 12.6 0 0 1-8.7 5\"/><path d=\"M16.8 13.6a16.55 16.55 0 0 1-9 7.5\"/><path d=\"M20.7 17a12.8 12.8 0 0 0-8.7-5 13.3 13.3 0 0 1 0-10\"/><path d=\"M6.3 3.8a16.55 16.55 0 0 0 1.9 11.5\"/><circle cx=\"12\" cy=\"12\" r=\"10\"/></svg>"
                                    }'>Sports & Fitness</option>
                                    <option value="#mega-menu-catalog-tab-7" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a3 3 0 0 1-3-3 1 1 0 0 1 1-1z\"/><path d=\"M13 10H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1l-.81 3.242a1 1 0 0 1-.97.758H8\"/><path d=\"M14 4h3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-3\"/><path d=\"M18 6h4\"/><path d=\"m5 10-2 8\"/><path d=\"m7 18 2-8\"/></svg>"
                                    }'>Construction & Renovation</option>
                                    <option value="#mega-menu-catalog-tab-8" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z\"/><path d=\"M10 2c1 .5 2 2 2 5\"/></svg>"
                                    }'>Food</option>
                                    <option value="#mega-menu-catalog-tab-9" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z\"/><path d=\"m8.5 8.5 7 7\"/></svg>"
                                    }'>Pharmacy</option>
                                    <option value="#mega-menu-catalog-tab-10" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11.25 16.25h1.5L12 17z\"/><path d=\"M16 14v.5\"/><path d=\"M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444a11.702 11.702 0 0 0-.493-3.309\"/><path d=\"M8 14v.5\"/><path d=\"M8.5 8.5c-.384 1.05-1.083 2.028-2.344 2.5-1.931.722-3.576-.297-3.656-1-.113-.994 1.177-6.53 4-7 1.923-.321 3.651.845 3.651 2.235A7.497 7.497 0 0 1 14 5.277c0-1.39 1.844-2.598 3.767-2.277 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5\"/></svg>"
                                    }'>Pet Products</option>
                                    <option value="#mega-menu-catalog-tab-11" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\"/><path d=\"M8 11h8\"/><path d=\"M8 7h6\"/></svg>"
                                    }'>Books</option>
                                    <option value="#mega-menu-catalog-tab-12" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"4\" cy=\"4\" r=\"2\"/><path d=\"m14 5 3-3 3 3\"/><path d=\"m14 10 3-3 3 3\"/><path d=\"M17 14V2\"/><path d=\"M17 14H7l-5 8h20Z\"/><path d=\"M8 14v8\"/><path d=\"m9 14 5 8\"/></svg>"
                                    }'>Tourism, fishing, hunting</option>
                                    <option value="#mega-menu-catalog-tab-13" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 9V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3\"/><path d=\"M3 16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V11a2 2 0 0 0-4 0z\"/><path d=\"M5 18v2\"/><path d=\"M19 18v2\"/></svg>"
                                    }'>Furniture</option>
                                    <option value="#mega-menu-catalog-tab-14" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 3h12l4 6-10 13L2 9Z\"/><path d=\"M11 3 8 9l4 13 4-13-3-6\"/><path d=\"M2 9h20\"/></svg>"
                                    }'>Jewelery</option>
                                    <option value="#mega-menu-catalog-tab-15" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"6\" cy=\"15\" r=\"4\"/><circle cx=\"18\" cy=\"15\" r=\"4\"/><path d=\"M14 15a2 2 0 0 0-2-2 2 2 0 0 0-2 2\"/><path d=\"M2.5 13 5 7c.7-1.3 1.4-2 3-2\"/><path d=\"M21.5 13 19 7c-.7-1.3-1.5-2-3-2\"/></svg>"
                                    }'>Accessories</option>
                                    <option value="#mega-menu-catalog-tab-16" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"6\" x2=\"10\" y1=\"11\" y2=\"11\"/><line x1=\"8\" x2=\"8\" y1=\"9\" y2=\"13\"/><line x1=\"15\" x2=\"15.01\" y1=\"12\" y2=\"12\"/><line x1=\"18\" x2=\"18.01\" y1=\"10\" y2=\"10\"/><path d=\"M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z\"/></svg>"
                                    }'>Games & Consoles</option>
                                    <option value="#mega-menu-catalog-tab-17" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13\"/><path d=\"m8 6 2-2\"/><path d=\"m18 16 2-2\"/><path d=\"m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17\"/><path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"/><path d=\"m15 5 4 4\"/></svg>"
                                    }'>Stationery</option>
                                    <option value="#mega-menu-catalog-tab-18" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4\"/><path d=\"M14 13.12c0 2.38 0 6.38-1 8.88\"/><path d=\"M17.29 21.02c.12-.6.43-2.3.5-3.02\"/><path d=\"M2 12a10 10 0 0 1 18-6\"/><path d=\"M2 16h.01\"/><path d=\"M21.8 16c.2-2 .131-5.354 0-6\"/><path d=\"M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2\"/><path d=\"M8.65 22c.21-.66.45-1.32.57-2\"/><path d=\"M9 6.8a6 6 0 0 1 9 5.2v2\"/></svg>"
                                    }'>Digital Goods</option>
                                    <option value="#mega-menu-catalog-tab-19" data-hs-select-option='{
                                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18V5l12-2v13\"/><circle cx=\"6\" cy=\"18\" r=\"3\"/><circle cx=\"18\" cy=\"16\" r=\"3\"/></svg>"
                                    }'>Music</option>
                                  </select>

<div class="flex">
                                    
                                    <div class="hidden sm:block sm:pe-4 w-96 h-[75dvh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                      <div id="hs-catalog-sidebar-nav-tabs" class="flex flex-col gap-y-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal" data-hs-tabs='{
                                        "eventType": "hover",
                                        "preventNavigationResolution": "sm"
                                      }'>
                                        
                                        <a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus active" id="mega-menu-catalog-tab-item-1" aria-selected="true" data-hs-tab="#mega-menu-catalog-tab-1" aria-controls="mega-menu-catalog-tab-1" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
                                          Electronics
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-2" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-2" aria-controls="mega-menu-catalog-tab-2" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/></svg>
                                          Clothing
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-3" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-3" aria-controls="mega-menu-catalog-tab-3" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 20h10"/><path d="M10 20c5.5-2.5.8-6.4 3-10"/><path d="M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z"/><path d="M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z"/></svg>
                                          House & Garden
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-4" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-4" aria-controls="mega-menu-catalog-tab-4" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12h.01"/><path d="M15 12h.01"/><path d="M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5"/><path d="M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1"/></svg>
                                          Baby Care
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-5" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-5" aria-controls="mega-menu-catalog-tab-5" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h3"/><path d="M17 6h.01"/><rect width="18" height="20" x="3" y="2" rx="2"/><circle cx="12" cy="13" r="5"/><path d="M12 18a2.5 2.5 0 0 0 0-5 2.5 2.5 0 0 1 0-5"/></svg>
                                          Home appliances
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-6" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-6" aria-controls="mega-menu-catalog-tab-6" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.1 7.1a16.55 16.55 0 0 1 10.9 4"/><path d="M12 12a12.6 12.6 0 0 1-8.7 5"/><path d="M16.8 13.6a16.55 16.55 0 0 1-9 7.5"/><path d="M20.7 17a12.8 12.8 0 0 0-8.7-5 13.3 13.3 0 0 1 0-10"/><path d="M6.3 3.8a16.55 16.55 0 0 0 1.9 11.5"/><circle cx="12" cy="12" r="10"/></svg>
                                          Sports & Fitness
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-7" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-7" aria-controls="mega-menu-catalog-tab-7" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a3 3 0 0 1-3-3 1 1 0 0 1 1-1z"/><path d="M13 10H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1l-.81 3.242a1 1 0 0 1-.97.758H8"/><path d="M14 4h3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-3"/><path d="M18 6h4"/><path d="m5 10-2 8"/><path d="m7 18 2-8"/></svg>
                                          Constraction & Renovation
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-8" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-8" aria-controls="mega-menu-catalog-tab-8" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"/><path d="M10 2c1 .5 2 2 2 5"/></svg>
                                          Food
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-9" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-9" aria-controls="mega-menu-catalog-tab-9" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z"/><path d="m8.5 8.5 7 7"/></svg>
                                          Pharmacy
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-10" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-10" aria-controls="mega-menu-catalog-tab-10" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.25 16.25h1.5L12 17z"/><path d="M16 14v.5"/><path d="M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444a11.702 11.702 0 0 0-.493-3.309"/><path d="M8 14v.5"/><path d="M8.5 8.5c-.384 1.05-1.083 2.028-2.344 2.5-1.931.722-3.576-.297-3.656-1-.113-.994 1.177-6.53 4-7 1.923-.321 3.651.845 3.651 2.235A7.497 7.497 0 0 1 14 5.277c0-1.39 1.844-2.598 3.767-2.277 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5"/></svg>
                                          Pet Products
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-11" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-11" aria-controls="mega-menu-catalog-tab-11" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/><path d="M8 11h8"/><path d="M8 7h6"/></svg>
                                          Books
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-12" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-12" aria-controls="mega-menu-catalog-tab-12" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="4" cy="4" r="2"/><path d="m14 5 3-3 3 3"/><path d="m14 10 3-3 3 3"/><path d="M17 14V2"/><path d="M17 14H7l-5 8h20Z"/><path d="M8 14v8"/><path d="m9 14 5 8"/></svg>
                                          Tourism, fishing, hunting
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-13" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-13" aria-controls="mega-menu-catalog-tab-13" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 9V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3"/><path d="M3 16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V11a2 2 0 0 0-4 0z"/><path d="M5 18v2"/><path d="M19 18v2"/></svg>
                                          Furniture
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-14" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-14" aria-controls="mega-menu-catalog-tab-14" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h12l4 6-10 13L2 9Z"/><path d="M11 3 8 9l4 13 4-13-3-6"/><path d="M2 9h20"/></svg>
                                          Jewelery
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-15" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-15" aria-controls="mega-menu-catalog-tab-15" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="15" r="4"/><circle cx="18" cy="15" r="4"/><path d="M14 15a2 2 0 0 0-2-2 2 2 0 0 0-2 2"/><path d="M2.5 13 5 7c.7-1.3 1.4-2 3-2"/><path d="M21.5 13 19 7c-.7-1.3-1.5-2-3-2"/></svg>
                                          Accessories
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-16" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-16" aria-controls="mega-menu-catalog-tab-16" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" x2="10" y1="11" y2="11"/><line x1="8" x2="8" y1="9" y2="13"/><line x1="15" x2="15.01" y1="12" y2="12"/><line x1="18" x2="18.01" y1="10" y2="10"/><path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"/></svg>
                                          Games & Consoles
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-17" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-17" aria-controls="mega-menu-catalog-tab-17" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13"/><path d="m8 6 2-2"/><path d="m18 16 2-2"/><path d="m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17"/><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                                          Stationery
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-18" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-18" aria-controls="mega-menu-catalog-tab-18" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/><path d="M14 13.12c0 2.38 0 6.38-1 8.88"/><path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/><path d="M2 12a10 10 0 0 1 18-6"/><path d="M2 16h.01"/><path d="M21.8 16c.2-2 .131-5.354 0-6"/><path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"/><path d="M8.65 22c.21-.66.45-1.32.57-2"/><path d="M9 6.8a6 6 0 0 1 9 5.2v2"/></svg>
                                          Digital Goods
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>

<a class="hs-tab-active:bg-navbar-nav-active py-2.5 px-2 w-full flex items-center gap-x-2 text-start font-medium text-sm bg-layer text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" id="mega-menu-catalog-tab-item-19" aria-selected="false" data-hs-tab="#mega-menu-catalog-tab-19" aria-controls="mega-menu-catalog-tab-19" role="tab" href="#">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
                                          Music
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </a>
                                        
                                      </div>
                                    </div>

<div class="pe-4 sm:px-10 w-full h-[75dvh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                      
                                      <div id="mega-menu-catalog-tab-1" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-1">
                                        
                                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7 md:gap-10">
                                          <div class="flex flex-col gap-7 md:gap-10">
                                            
                                            <div class="space-y-7 md:space-y-10">
                                              <div>
                                                <span class="mb-2 flex justify-center items-center size-12 bg-surface text-surface-foreground rounded-xl">
                                                  <svg class="shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
                                                </span>
                                                <span class="block mb-3 font-medium text-sm text-foreground">Phones and smart watches</span>
          
                                                <div class="flex flex-col gap-y-1">
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Smartphones & Tablets</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Accessories for smartphones and phones</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Smart Watch</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Fitness bracelets</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Straps for smartwatches and fitness bracelets</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Accessories for smartwatches and fitness bracelets</a></div>
            
                                                  <div id="hs-shmnctdmsh1_1-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-shmnctdmsh1_1" role="region">
                                                    <div class="flex flex-col gap-y-1">
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Mobile Phones</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">SIM Cards</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Replacement Parts</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Corded and cordless telephones</a></div>
                                                    </div>
                                                  </div>

<div class="space-y-7 md:space-y-10">
                                              <div>
                                                <span class="mb-2 flex justify-center items-center size-12 bg-surface text-surface-foreground rounded-xl">
                                                  <svg class="shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16"/></svg>
                                                </span>
                                                <span class="block mb-3 font-medium text-sm text-foreground">Laptops, tablets and e-books</span>
          
                                                <div class="flex flex-col gap-y-1">
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Laptops</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Gaming Laptops</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Tablets</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">E-books</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Graphics Tablets</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Cases and stands for tablets</a></div>
            
                                                  <div id="hs-shmnctdmsh1_2-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-shmnctdmsh1_2" role="region">
                                                    <div class="flex flex-col gap-y-1">
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Touch pens</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Laptop Accessories</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Replacement Parts</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Laptop Batteries</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Chargers</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">E-book cases</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Translators and dictionaries</a></div>
                                                    </div>
                                                  </div>

<div class="space-y-7 md:space-y-10">
                                              <div>
                                                <span class="mb-2 flex justify-center items-center size-12 bg-surface text-surface-foreground rounded-xl">
                                                  <svg class="shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"/></svg>
                                                </span>
                                                <span class="block mb-3 font-medium text-sm text-foreground">Headphones and audio equipment</span>
          
                                                <div class="flex flex-col gap-y-1">
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Headphone</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Wireless Speakers</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Smart speakers</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Speakers</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Studio and stage equipment</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Microphones</a></div>
            
                                                  <div id="hs-shmnctdmsh1_3-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-shmnctdmsh1_3" role="region">
                                                    <div class="flex flex-col gap-y-1">
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Walkie-talkies and radios</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Radios</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Vinyl Players & Accessories</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Headphone Accessories</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Accessories for audio equipment</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Amplifiers, receivers and DACs</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">MP3 Players</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Voice recorders</a></div>
                                                    </div>
                                                  </div>

<button type="button" class="hs-collapse-toggle flex items-center gap-x-1 font-medium text-[13px] text-primary text-start hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" id="hs-shmnctdmsh1_3" aria-expanded="false" aria-controls="hs-shmnctdmsh1_3-heading" data-hs-collapse="#hs-shmnctdmsh1_3-heading">
                                                    <span class="hs-collapse-open:hidden">Show more</span>
                                                    <span class="hs-collapse-open:block hidden">Show less</span>
                                                    <svg class="hs-collapse-open:rotate-180 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                </div>
                                              </div>
                                            </div>
                                            
                                          </div>
                                          
    
                                          <div class="flex flex-col gap-7 md:gap-10">
                                            
                                            <div class="space-y-7 md:space-y-10">
                                              <div>
                                                <span class="mb-2 flex justify-center items-center size-12 bg-surface text-surface-foreground rounded-xl">
                                                  <svg class="shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="8" x="5" y="2" rx="2"/><rect width="20" height="8" x="2" y="14" rx="2"/><path d="M6 18h2"/><path d="M12 18h6"/></svg>
                                                </span>
                                                <span class="block mb-3 font-medium text-sm text-foreground">Computers & Peripherals</span>

<div class="flex flex-col gap-y-1">
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Monitors</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">System Units</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">All-in-One PCs</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Periphery</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Networking</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Nettops and Mini PCs</a></div>
            
                                                  <div id="hs-shmnctdmsh2_1-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-shmnctdmsh2_1" role="region">
                                                    <div class="flex flex-col gap-y-1">
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Miners & Crypto Wallets</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Microcomputers and components</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Industrial Computers and Servers</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Spare parts for monitors</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Software</a></div>
                                                    </div>
                                                  </div>

<div class="space-y-7 md:space-y-10">
                                              <div>
                                                <span class="mb-2 flex justify-center items-center size-12 bg-surface text-surface-foreground rounded-xl">
                                                  <svg class="shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>
                                                </span>
                                                <span class="block mb-3 font-medium text-sm text-foreground">Photo and video cameras</span>
          
                                                <div class="flex flex-col gap-y-1">
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Action Cameras</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Action Camera Accessories</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Camcorders</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">SLR Cameras</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Mirrorless Cameras</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Lenses</a></div>
            
                                                  <div id="hs-shmnctdmsh2_2-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-shmnctdmsh2_2" role="region">
                                                    <div class="flex flex-col gap-y-1">
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Compact Cameras</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Instant Print Cameras</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Children's cameras and camcorders</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Accessories for photo and video equipment</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Photophones</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Studio equipment</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Cartridges and photographic film</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Compact Photo Printers</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Digital Photo Frames</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Other Accessories</a></div>
                                                    </div>
                                                  </div>

<button type="button" class="hs-collapse-toggle flex items-center gap-x-1 font-medium text-[13px] text-primary text-start hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" id="hs-shmnctdmsh2_2" aria-expanded="false" aria-controls="hs-shmnctdmsh2_2-heading" data-hs-collapse="#hs-shmnctdmsh2_2-heading">
                                                    <span class="hs-collapse-open:hidden">Show more</span>
                                                    <span class="hs-collapse-open:block hidden">Show less</span>
                                                    <svg class="hs-collapse-open:rotate-180 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                </div>
                                              </div>
                                            </div>
                                            
    
                                            
                                            <div class="space-y-7 md:space-y-10">
                                              <div>
                                                <span class="mb-2 flex justify-center items-center size-12 bg-surface text-surface-foreground rounded-xl">
                                                  <svg class="shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" x2="10" y1="11" y2="11"/><line x1="8" x2="8" y1="9" y2="13"/><line x1="15" x2="15.01" y1="12" y2="12"/><line x1="18" x2="18.01" y1="10" y2="10"/><path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"/></svg>
                                                </span>
                                                <span class="block mb-3 font-medium text-sm text-foreground">Game consoles and laptops</span>

<div class="space-y-7 md:space-y-10">
                                              <div>
                                                <span class="mb-2 flex justify-center items-center size-12 bg-surface text-surface-foreground rounded-xl">
                                                  <svg class="shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 7 3 5"/><path d="M9 6V3"/><path d="m13 7 2-2"/><circle cx="9" cy="13" r="3"/><path d="M11.83 12H20a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.17"/><path d="M16 16h2"/></svg>
                                                </span>
                                                <span class="block mb-3 font-medium text-sm text-foreground">Office equipment</span>
          
                                                <div class="flex flex-col gap-y-1">
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Laptops</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">System Units</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Monitors</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">MFPs</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Printers</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Cartridges and supplies</a></div>
            
                                                  <div id="hs-shmnctdmsh2_3-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-shmnctdmsh2_3" role="region">
                                                    <div class="flex flex-col gap-y-1">
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Equipment for trade</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">3D Equipment</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Spare Parts & Accessories</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Scanners</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Copiers</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Plotters</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Laminators</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Shredders</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Brochure makers</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Archive Binding</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Projectors</a></div>
                                                    </div>
                                                  </div>

<button type="button" class="hs-collapse-toggle flex items-center gap-x-1 font-medium text-[13px] text-primary text-start hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" id="hs-shmnctdmsh2_3" aria-expanded="false" aria-controls="hs-shmnctdmsh2_3-heading" data-hs-collapse="#hs-shmnctdmsh2_3-heading">
                                                    <span class="hs-collapse-open:hidden">Show more</span>
                                                    <span class="hs-collapse-open:block hidden">Show less</span>
                                                    <svg class="hs-collapse-open:rotate-180 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                </div>
                                              </div>
                                            </div>
                                            
                                          </div>
                                          
    
                                          <div class="flex flex-col gap-7 md:gap-10">
                                            
                                            <div class="space-y-7 md:space-y-10">
                                              <div>
                                                <span class="mb-2 flex justify-center items-center size-12 bg-surface text-surface-foreground rounded-xl">
                                                  <svg class="shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="12" x="2" y="6" rx="1"/><path d="M13 8.32a7.43 7.43 0 0 1 0 7.36"/><path d="M16.46 6.21a11.76 11.76 0 0 1 0 11.58"/><path d="M19.91 4.1a15.91 15.91 0 0 1 .01 15.8"/></svg>
                                                </span>
                                                <span class="block mb-3 font-medium text-sm text-foreground">Smart Home</span>

<div class="flex flex-col gap-y-1">
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Television</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Set-top boxes and media players</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Brackets & Mounts</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Digital and satellite TV</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Online cinemas</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Remote controls</a></div>
            
                                                  <div id="hs-shmnctdmsh3_2-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-shmnctdmsh3_2" role="region">
                                                    <div class="flex flex-col gap-y-1">
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Antenna</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Spare Parts & Accessories</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">DVD Players</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Projectors</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Projection screens</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Interactive panels and LED screens</a></div>
                                                    </div>
                                                  </div>

<button type="button" class="hs-collapse-toggle flex items-center gap-x-1 font-medium text-[13px] text-primary text-start hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" id="hs-shmnctdmsh3_2" aria-expanded="false" aria-controls="hs-shmnctdmsh3_2-heading" data-hs-collapse="#hs-shmnctdmsh3_2-heading">
                                                    <span class="hs-collapse-open:hidden">Show more</span>
                                                    <span class="hs-collapse-open:block hidden">Show less</span>
                                                    <svg class="hs-collapse-open:rotate-180 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                </div>
                                              </div>
                                            </div>
                                            
    
                                            
                                            <div class="space-y-7 md:space-y-10">
                                              <div>
                                                <span class="mb-2 flex justify-center items-center size-12 bg-surface text-surface-foreground rounded-xl">
                                                  <svg class="shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/><path d="M5 3 2 6"/><path d="m22 6-3-3"/><path d="M6.38 18.7 4 21"/><path d="M17.64 18.67 20 21"/></svg>
                                                </span>
                                                <span class="block mb-3 font-medium text-sm text-foreground">Clocks and electronic alarm clocks</span>

<div class="flex flex-col gap-y-1">
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">CCTV Cameras</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Video surveillance systems</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Automation for gates</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Intercoms</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Security equipment for home and cottage</a></div>
                                                  <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Security systems for business</a></div>
            
                                                  <div id="hs-shmnctdmsh3_3-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-shmnctdmsh3_3" role="region">
                                                    <div class="flex flex-col gap-y-1">
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Hidden Cameras & Personal Video Recorders</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Registrars</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Dummy CCTV Cameras</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Electronic locks</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Electronic keys and cards</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Signal suppressors and anti-bugs</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Installation of video surveillance</a></div>
                                                      <div><a class="text-[13px] text-muted-foreground-1 underline-offset-4 hover:text-navbar-nav-foreground focus:outline-hidden focus:text-navbar-nav-foreground" href="#">Personal alarms</a></div>
                                                    </div>
                                                  </div>

<div id="mega-menu-catalog-tab-2" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-2">
                                        
                                        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-6">
                                          
                                          <a class="group block p-4 rounded-lg text-center hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/marketplace/listing.html">
                                            <div class="relative shrink-0">
                                              <img class="shrink-0 size-16 sm:size-20 lg:size-24 mx-auto object-cover rounded-full" src="https://images.unsplash.com/photo-1726828501829-9188cde81755?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                              <div class="absolute -top-0.5 inset-e-0.5">
                                                <span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-primary-100 text-primary-800 rounded-full dark:bg-primary-900 dark:text-primary-500">Hot</span>
                                              </div>
                                            </div>
                                            <span class="mt-3 block text-sm text-foreground">Phones</span>
                                          </a>

<a class="group block p-4 rounded-lg text-center hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/marketplace/listing.html">
                                            <div class="relative shrink-0">
                                              <img class="shrink-0 size-16 sm:size-20 lg:size-24 mx-auto object-cover rounded-full" src="https://images.unsplash.com/photo-1616763355603-9755a640a287?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            </div>
                                            <span class="mt-3 block text-sm text-foreground">Computers</span>
                                          </a>

<a class="group block p-4 rounded-lg text-center hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/marketplace/listing.html">
                                            <div class="relative shrink-0">
                                              <img class="shrink-0 size-16 sm:size-20 lg:size-24 mx-auto object-cover rounded-full" src="https://images.unsplash.com/photo-1666401565408-9b6b0741f0d6?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            </div>
                                            <span class="mt-3 block text-sm text-foreground">Smart Home</span>
                                          </a>

<a class="group block p-4 rounded-lg text-center hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/marketplace/listing.html">
                                            <div class="relative shrink-0">
                                              <img class="shrink-0 size-16 sm:size-20 lg:size-24 mx-auto object-cover rounded-full" src="https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            </div>
                                            <span class="mt-3 block text-sm text-foreground">Laptops</span>
                                          </a>

<a class="group block p-4 rounded-lg text-center hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/marketplace/listing.html">
                                            <div class="relative shrink-0">
                                              <img class="shrink-0 size-16 sm:size-20 lg:size-24 mx-auto object-cover rounded-full" src="https://images.unsplash.com/photo-1698729616468-5b2f627df845?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                              <div class="absolute -top-0.5 inset-e-0.5">
                                                <span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-primary-100 text-primary-800 rounded-full dark:bg-primary-900 dark:text-primary-500">Hot</span>
                                              </div>
                                            </div>
                                            <span class="mt-3 block text-sm text-foreground">Smart Watches</span>
                                          </a>

<a class="group block p-4 rounded-lg text-center hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/marketplace/listing.html">
                                            <div class="relative shrink-0">
                                              <img class="shrink-0 size-16 sm:size-20 lg:size-24 mx-auto object-cover rounded-full" src="https://images.unsplash.com/photo-1662731340335-e5485bd50268?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                              <div class="absolute -top-0.5 inset-e-0.5">
                                                <span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-primary-100 text-primary-800 rounded-full dark:bg-primary-900 dark:text-primary-500">Hot</span>
                                              </div>
                                            </div>
                                            <span class="mt-3 block text-sm text-foreground">Tablets</span>
                                          </a>

<a class="group block p-4 rounded-lg text-center hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/marketplace/listing.html">
                                            <div class="relative shrink-0">
                                              <img class="shrink-0 size-16 sm:size-20 lg:size-24 mx-auto object-cover rounded-full" src="https://images.unsplash.com/photo-1522401195795-1d580bb06720?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            </div>
                                            <span class="mt-3 block text-sm text-foreground">Cameras</span>
                                          </a>

<a class="group block p-4 rounded-lg text-center hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/marketplace/listing.html">
                                            <div class="relative shrink-0">
                                              <img class="shrink-0 size-16 sm:size-20 lg:size-24 mx-auto object-cover rounded-full" src="https://images.unsplash.com/photo-1594155187705-bd33d893961c?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            </div>
                                            <span class="mt-3 block text-sm text-foreground">TVs</span>
                                          </a>

<a class="group block p-4 rounded-lg text-center hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/marketplace/listing.html">
                                            <div class="relative shrink-0">
                                              <img class="shrink-0 size-16 sm:size-20 lg:size-24 mx-auto object-cover rounded-full" src="https://images.unsplash.com/photo-1532543758257-0f4e06e08aec?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            </div>
                                            <span class="mt-3 block text-sm text-foreground">Optical Devices</span>
                                          </a>

<a class="group block p-4 rounded-lg text-center hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/marketplace/listing.html">
                                            <div class="relative shrink-0">
                                              <img class="shrink-0 size-16 sm:size-20 lg:size-24 mx-auto object-cover rounded-full" src="https://images.unsplash.com/photo-1542549237432-a176cb9d5e5e?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                              <div class="absolute -top-0.5 inset-e-0.5">
                                                <span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-primary-100 text-primary-800 rounded-full dark:bg-primary-900 dark:text-primary-500">Hot</span>
                                              </div>
                                            </div>
                                            <span class="mt-3 block text-sm text-foreground">Game Consoles</span>
                                          </a>

<a class="group block p-4 rounded-lg text-center hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/marketplace/listing.html">
                                            <div class="relative shrink-0">
                                              <img class="shrink-0 size-16 sm:size-20 lg:size-24 mx-auto object-cover rounded-full" src="https://images.unsplash.com/photo-1628329567705-f8f7150c3cff?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            </div>
                                            <span class="mt-3 block text-sm text-foreground">Headphones</span>
                                          </a>

<a class="group block p-4 rounded-lg text-center hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/marketplace/listing.html">
                                            <div class="relative shrink-0">
                                              <img class="shrink-0 size-16 sm:size-20 lg:size-24 mx-auto object-cover rounded-full" src="https://images.unsplash.com/photo-1618482914248-29272d021005?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            </div>
                                            <span class="mt-3 block text-sm text-foreground">Security Systems</span>
                                          </a>

<a class="group block p-4 rounded-lg text-center hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/marketplace/listing.html">
                                            <div class="relative shrink-0">
                                              <img class="shrink-0 size-16 sm:size-20 lg:size-24 mx-auto object-cover rounded-full" src="https://images.unsplash.com/photo-1550009158-9ebf69173e03?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            </div>
                                            <span class="mt-3 block text-sm text-foreground">PC Accessories</span>
                                          </a>

<a class="group block p-4 rounded-lg text-center hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/marketplace/listing.html">
                                            <div class="relative shrink-0">
                                              <img class="shrink-0 size-16 sm:size-20 lg:size-24 mx-auto object-cover rounded-full" src="https://images.unsplash.com/photo-1631052941794-2a6e26d4ac17?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            </div>
                                            <span class="mt-3 block text-sm text-foreground">Drones</span>
                                          </a>

<a class="group block p-4 rounded-lg text-center hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/marketplace/listing.html">
                                            <div class="relative shrink-0">
                                              <img class="shrink-0 size-16 sm:size-20 lg:size-24 mx-auto object-cover rounded-full" src="https://images.unsplash.com/photo-1657734240363-356201c49b15?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            </div>
                                            <span class="mt-3 block text-sm text-foreground">VRs</span>
                                          </a>
                                          
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-3" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-3">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-4" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-4">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-5" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-5">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-6" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-6">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-7" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-7">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-8" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-8">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-9" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-9">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-10" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-10">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-11" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-11">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-12" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-12">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>
                                      
 
                                      
                                      <div id="mega-menu-catalog-tab-13" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-13">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-14" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-14">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-15" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-15">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-16" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-16">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-17" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-17">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-18" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-18">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>

<div id="mega-menu-catalog-tab-19" class="hidden h-full" role="tabpanel" aria-labelledby="mega-menu-catalog-tab-item-19">
                                        
                                        <div class="h-full flex flex-col justify-center items-center text-center">
                                          <span class="py-1.5 inline-flex gap-x-1">
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                            <span class="size-2.5 bg-surface-4 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                          </span>
                                          <p class="mt-3 text-sm text-muted-foreground-1">
                                            This is a placeholder loader.<br>This conent is empty.
                                          </p>
                                        </div>
                                        
                                      </div>
                                      
                                    </div>
                                    
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>

<div class="hidden md:block w-full">
                              
                              <div class="relative w-full">
                                <input type="text" class="py-1.5 ps-4 sm:py-2.5 pe-10 block w-full bg-layer border-layer-line text-base sm:text-sm rounded-full text-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Search Preline">
                                <div class="absolute inset-y-0 inset-e-0 z-10 flex items-center pe-1 sm:pe-1.5">
                                  <button type="button" class="inline-flex shrink-0 justify-center items-center w-10 h-8 rounded-full bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus dark:bg-primary dark:hover:bg-primary-hover dark:focus:bg-primary-focus">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                                  </button>
                                </div>
                                <div class="hidden absolute inset-y-0 inset-e-12 flex items-center pointer-events-none z-10 pe-1">
                                  <button type="button" class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" aria-label="Close">
                                    <span class="sr-only">Close</span>
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                                  </button>
                                </div>
                              </div>
                              
                            </div>
                          </div>
                        </div>

<div class="order-2 md:order-3 ms-auto lg:ms-0">
                          <div class="flex justify-end items-center gap-x-2">
                            
                            <a class="flex flex-col justify-center items-center gap-1 min-w-14 min-h-8 text-xs rounded-full text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">
                              <svg class="shrink-0 size-4 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                              Sign in
                            </a>

<a class="flex flex-col justify-center items-center gap-1 min-w-14 min-h-8 text-xs rounded-full text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">
                              <svg class="shrink-0 size-4 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg>
                              Favorite
                            </a>

<a class="relative flex flex-col justify-center items-center gap-1 min-w-14 min-h-8 text-xs rounded-full text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">
                              <svg class="shrink-0 size-4 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>
                              Cart
                            </a>
                            
                          </div>
                        </div>
                        
                      </div>

<div class="md:hidden mt-2.5 md:mt-0 w-full">
                        
                        <div class="relative w-full">
                          <input type="text" class="py-1.5 ps-4 sm:py-2.5 pe-10 block w-full bg-layer border-layer-line text-base sm:text-sm rounded-full text-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Search Preline">
                          <div class="absolute inset-y-0 inset-e-0 z-10 flex items-center pe-1 sm:pe-1.5">
                            <button type="button" class="inline-flex shrink-0 justify-center items-center w-10 h-8 rounded-full bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus dark:bg-primary dark:hover:bg-primary-hover dark:focus:bg-primary-focus">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                            </button>
                          </div>
                          <div class="hidden absolute inset-y-0 inset-e-12 flex items-center pointer-events-none z-10 pe-1">
                            <button type="button" class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" aria-label="Close">
                              <span class="sr-only">Close</span>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                            </button>
                          </div>
                        </div>
                        
                      </div>
                    </div>

<div class="max-w-340 w-full mx-auto px-4 sm:px-6 lg:px-8 pb-1">
                      <div class="relative flex basis-full items-center gap-x-1">
                        
                        <div class="flex flex-row items-center gap-x-1 overflow-x-auto [&::-webkit-scrollbar]:hidden">
                          
                          <div class="hs-dropdown [--strategy:absolute] [--adaptive:none] [--auto-close:inside] md:[--trigger:hover] md:inline-block group">
                            
                            <button id="hs-pro-shmnpgdm" type="button" class="hs-dropdown-toggle relative py-2 px-3 w-full lg:w-auto flex items-center gap-x-1.5 text-sm whitespace-nowrap text-start text-navbar-nav-foreground rounded-full hover:bg-navbar-nav-hover group-hover:bg-navbar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-navbar-nav-focus after:absolute after:inset-s-1/2 after:bottom-[3px] after:w-4 after:h-[3px] after:bg-primary after:rounded-full after:-translate-x-1/2 after:transition" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg>
                              Pages
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-56 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shmnpgdm">
                              <div class="p-1 space-y-0.5">
                                <a class="relative group py-2 px-3 flex items-center gap-x-3 text-sm text-navbar-nav-foreground hover:bg-navbar-nav-hover rounded-lg focus:outline-hidden focus:bg-navbar-nav-focus bg-navbar-nav-active" href="../../../templates/ecommerce/marketplace/index.html">
                                  Home
                                </a>

<a class="relative group py-2 px-3 flex items-center gap-x-3 text-sm text-navbar-nav-foreground hover:bg-navbar-nav-hover rounded-lg focus:outline-hidden focus:bg-navbar-nav-focus " href="../../../templates/ecommerce/marketplace/product-detail.html">
                                  Product Detail
                                </a>
                              </div>
                            </div>
                            
                          </div>

<a class="relative py-2 px-3 w-full lg:w-auto flex items-center gap-x-1.5 text-sm whitespace-nowrap text-start text-navbar-nav-foreground rounded-full hover:bg-navbar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-navbar-nav-focus after:absolute after:inset-s-1/2 after:bottom-[3px] after:w-4 after:h-[3px] after:bg-primary after:rounded-full after:-translate-x-1/2 after:transition after:scale-0" href="#">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="5" y1="5" y2="19"/><circle cx="6.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/></svg>
                            Sales
                          </a>

<a class="relative py-2 px-3 w-full lg:w-auto flex items-center gap-x-1.5 text-sm whitespace-nowrap text-start text-navbar-nav-foreground rounded-full hover:bg-navbar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-navbar-nav-focus after:absolute after:inset-s-1/2 after:bottom-[3px] after:w-4 after:h-[3px] after:bg-primary after:rounded-full after:-translate-x-1/2 after:transition after:scale-0" href="#">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/></svg>
                            Best Sellers
                          </a>

<a class="relative py-2 px-3 w-full lg:w-auto flex items-center gap-x-1.5 text-sm whitespace-nowrap text-start text-navbar-nav-foreground rounded-full hover:bg-navbar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-navbar-nav-focus after:absolute after:inset-s-1/2 after:bottom-[3px] after:w-4 after:h-[3px] after:bg-primary after:rounded-full after:-translate-x-1/2 after:transition after:scale-0" href="#">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 16h6"/><path d="M19 13v6"/><path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14"/><path d="m7.5 4.27 9 5.15"/><polyline points="3.29 7 12 12 20.71 7"/><line x1="12" x2="12" y1="22" y2="12"/></svg>
                            New Arrivals
                          </a>

<a class="relative py-2 px-3 w-full lg:w-auto flex items-center gap-x-1.5 text-sm whitespace-nowrap text-start text-navbar-nav-foreground rounded-full hover:bg-navbar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-navbar-nav-focus after:absolute after:inset-s-1/2 after:bottom-[3px] after:w-4 after:h-[3px] after:bg-primary after:rounded-full after:-translate-x-1/2 after:transition after:scale-0" href="#">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/><path d="M8 11h8"/><path d="M8 7h6"/></svg>
                            Books
                          </a>

<a class="relative py-2 px-3 w-full lg:w-auto flex items-center gap-x-1.5 text-sm whitespace-nowrap text-start text-navbar-nav-foreground rounded-full hover:bg-navbar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-navbar-nav-focus after:absolute after:inset-s-1/2 after:bottom-[3px] after:w-4 after:h-[3px] after:bg-primary after:rounded-full after:-translate-x-1/2 after:transition after:scale-0" href="#">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/></svg>
                            Clothing
                          </a>

<a class="relative py-2 px-3 w-full lg:w-auto flex items-center gap-x-1.5 text-sm whitespace-nowrap text-start text-navbar-nav-foreground rounded-full hover:bg-navbar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-navbar-nav-focus after:absolute after:inset-s-1/2 after:bottom-[3px] after:w-4 after:h-[3px] after:bg-primary after:rounded-full after:-translate-x-1/2 after:transition after:scale-0" href="#">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg>
                            Gift Cards
                          </a>
                        </div>
                        
                      </div>
                    </div>
                  </header>

<div id="hs-pro-shnrsm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-shnrsm-label">
                    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-md sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                      <div class="w-full max-h-full relative overflow-hidden flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                        
                        <div class="py-4 px-6 md:px-8 flex justify-between items-center border-b border-overlay-divider">
                          <h2 id="hs-pro-shnrsm-label" class="font-medium text-foreground">
                            Which country would like to shop in?
                          </h2>
                          <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-shnrsm">
                            <span class="sr-only">Close</span>
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 id="hs-pro-shnlm-body" class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <div class="p-6 md:p-8 space-y-5">
                            
                            <div>
                              <label class="block mb-2 text-sm font-medium text-foreground">
                                Language
                              </label>

<div class="relative">
                                <select id="hs-pro-select-language" data-hs-select='{
                                  "placeholder": "Select country",
                                  "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
                                  "dropdownClasses": "z-80 w-full min-w-45 max-h-72 p-1 space-y-0.5 z-50 w-full overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                  "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 ps-4 pe-9 flex items-center gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary",
                                  "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                                  "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-foreground\" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div></div>",
                                  "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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></div>",
                                  "dropdownScope": "window",
                                  "viewport": "#hs-pro-shnlm-body"
                                }' class="hidden">
                                  <option value="">Choose</option>
                                  <option value="English-us" data-hs-select-option='{
                                    "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><g fill-rule=\"evenodd\"><g stroke-width=\"1pt\"><path fill=\"#bd3d44\" d=\"M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z\" transform=\"scale(3.9385)\"/><path fill=\"#fff\" d=\"M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z\" transform=\"scale(3.9385)\"/></g><path fill=\"#192f5d\" d=\"M0 0h98.8v70H0z\" transform=\"scale(3.9385)\"/><path fill=\"#fff\" d=\"M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z\" transform=\"scale(3.9385)\"/></g></svg>"}'>
                                    English (United States)
                                  </option>
                                  <option selected value="English-uk" data-hs-select-option='{
                                    "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-gb\" viewBox=\"0 0 512 512\"><path fill=\"#012169\" d=\"M0 0h512v512H0z\"/><path fill=\"#FFF\" d=\"M512 0v64L322 256l190 187v69h-67L254 324 68 512H0v-68l186-187L0 74V0h62l192 188L440 0z\"/><path fill=\"#C8102E\" d=\"M184 324l11 34L42 512H0v-3l184-185zm124-12l54 8 150 147v45L308 312zM512 0L320 196l-4-44L466 0h46zM0 1l193 189-59-8L0 49V1z\"/><path fill=\"#FFF\" d=\"M176 0v512h160V0H176zM0 176v160h512V176H0z\"/><path fill=\"#C8102E\" d=\"M0 208v96h512v-96H0zM208 0v512h96V0h-96z\"/></svg>"}'>
                                    English (United Kingdom)
                                  </option>
                                  <option value="Deutsch" data-hs-select-option='{
                                    "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-de\" viewBox=\"0 0 512 512\"><path fill=\"#ffce00\" d=\"M0 341.3h512V512H0z\"/><path d=\"M0 0h512v170.7H0z\"/><path fill=\"#d00\" d=\"M0 170.7h512v170.6H0z\"/></svg>"}'>
                                    Deutsch
                                  </option>
                                  <option value="Dansk" data-hs-select-option='{
                                    "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-dk\" viewBox=\"0 0 512 512\"><path fill=\"#c8102e\" d=\"M0 0h512.1v512H0z\"/><path fill=\"#fff\" d=\"M144 0h73.1v512H144z\"/><path fill=\"#fff\" d=\"M0 219.4h512.1v73.2H0z\"/></svg>"}'>
                                    Dansk
                                  </option>
                                  <option value="Italiano" data-hs-select-option='{
                                    "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-it\" viewBox=\"0 0 512 512\"><g fill-rule=\"evenodd\" stroke-width=\"1pt\"><path fill=\"#fff\" d=\"M0 0h512v512H0z\"/><path fill=\"#009246\" d=\"M0 0h170.7v512H0z\"/><path fill=\"#ce2b37\" d=\"M341.3 0H512v512H341.3z\"/></g></svg>"}'>
                                    Italiano
                                  </option>
                                  <option value="中文-繁體" data-hs-select-option='{
                                    "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" id=\"flag-icon-css-cn\" viewBox=\"0 0 512 512\"><defs><path id=\"a\" fill=\"#ffde00\" d=\"M1-.3L-.7.8 0-1 .6.8-1-.3z\"/></defs><path fill=\"#de2910\" d=\"M0 0h512v512H0z\"/><use width=\"30\" height=\"20\" transform=\"matrix(76.8 0 0 76.8 128 128)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-121 142.6 -47) scale(25.5827)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-98.1 198 -82) scale(25.6)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-74 272.4 -114) scale(25.6137)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"matrix(16 -19.968 19.968 16 256 230.4)\" xlink:href=\"#a\"/></svg>"}'>
                                    中文 (繁體)
                                  </option>
                                </select>
                                
                              </div>
                              
                            </div>

<div>
                              <label class="block mb-2 text-sm font-medium text-foreground">
                                Country
                              </label>

<div class="relative">
                                <select data-hs-select='{
                                    "placeholder": "",
                                    "hasSearch": true,
                                    "searchPlaceholder": "Country",
                                    "searchClasses": "py-1.5 sm:py-2 px-3 block w-full sm:text-sm bg-transparent border-line-2 rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus",
                                    "searchWrapperClasses": "bg-select p-2 -mx-1 sticky top-0",
                                    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"flex\" data-icon></span><span class=\"text-foreground\" data-title></span></button>",
                                    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary",
                                    "dropdownClasses": "z-80 max-h-72 p-1 pt-0 space-y-0.5 z-50 w-full overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                    "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                                    "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"text-foreground\" data-title></div></div></div>",
                                    "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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></div>",
                                    "dropdownScope": "window",
                                    "viewport": "#hs-pro-shnlm-body"
                                  }' class="hidden">
                                  <option value="">Choose</option>
                                  <option value="AF" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/af.png\" alt=\"Afghanistan\" />"}'>
                                    Afghanistan
                                  </option>
                                  <option value="AX" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ax.png\" alt=\"Aland Islands\" />"}'>
                                    Aland Islands
                                  </option>
                                  <option value="AL" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/al.png\" alt=\"Albania\" />"}'>
                                    Albania
                                  </option>
                                  <option value="DZ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dz.png\" alt=\"Algeria\" />"}'>
                                    Algeria
                                  </option>
                                  <option value="AS" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/as.png\" alt=\"American Samoa\" />"}'>
                                    American Samoa
                                  </option>
                                  <option value="AD" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ad.png\" alt=\"Andorra\" />"}'>
                                    Andorra
                                  </option>
                                  <option value="AO" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ao.png\" alt=\"Angola\" />"}'>
                                    Angola
                                  </option>
                                  <option value="AI" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ai.png\" alt=\"Anguilla\" />"}'>
                                    Anguilla
                                  </option>
                                  <option value="AG" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ag.png\" alt=\"Antigua and Barbuda\" />"}'>
                                    Antigua and Barbuda
                                  </option>
                                  <option value="AR" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ar.png\" alt=\"Argentina\" />"}'>
                                    Argentina
                                  </option>
                                  <option value="AM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/am.png\" alt=\"Armenia\" />"}'>
                                    Armenia
                                  </option>
                                  <option value="AW" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/aw.png\" alt=\"Aruba\" />"}'>
                                    Aruba
                                  </option>
                                  <option value="AU" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/au.png\" alt=\"Australia\" />"}'>
                                    Australia
                                  </option>
                                  <option value="AT" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/at.png\" alt=\"Austria\" />"}'>
                                    Austria
                                  </option>
                                  <option value="AZ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/az.png\" alt=\"Azerbaijan\" />"}'>
                                    Azerbaijan
                                  </option>
                                  <option value="BS" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bs.png\" alt=\"Bahamas\" />"}'>
                                    Bahamas
                                  </option>
                                  <option value="BH" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bh.png\" alt=\"Bahrain\" />"}'>
                                    Bahrain
                                  </option>
                                  <option value="BD" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bd.png\" alt=\"Bangladesh\" />"}'>
                                    Bangladesh
                                  </option>
                                  <option value="BB" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bb.png\" alt=\"Barbados\" />"}'>
                                    Barbados
                                  </option>
                                  <option value="BY" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/by.png\" alt=\"Belarus\" />"}'>
                                    Belarus
                                  </option>
                                  <option value="BE" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/be.png\" alt=\"Belgium\" />"}'>
                                    Belgium
                                  </option>
                                  <option value="BZ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bz.png\" alt=\"Belize\" />"}'>
                                    Belize
                                  </option>
                                  <option value="BJ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bj.png\" alt=\"Benin\" />"}'>
                                    Benin
                                  </option>
                                  <option value="BM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bm.png\" alt=\"Bermuda\" />"}'>
                                    Bermuda
                                  </option>
                                  <option value="BT" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bt.png\" alt=\"Bhutan\" />"}'>
                                    Bhutan
                                  </option>
                                  <option value="BO" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bo.png\" alt=\"Bolivia (Plurinational State of)\" />"}'>
                                    Bolivia (Plurinational State of)
                                  </option>
                                  <option value="BQ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bq.png\" alt=\"Bonaire, Sint Eustatius and Saba\" />"}'>
                                    Bonaire, Sint Eustatius and Saba
                                  </option>
                                  <option value="BA" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ba.png\" alt=\"Bosnia and Herzegovina\" />"}'>
                                    Bosnia and Herzegovina
                                  </option>
                                  <option value="BW" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bw.png\" alt=\"Botswana\" />"}'>
                                    Botswana
                                  </option>
                                  <option value="BR" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/br.png\" alt=\"Brazil\" />"}'>
                                    Brazil
                                  </option>
                                  <option value="IO" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/io.png\" alt=\"British Indian Ocean Territory\" />"}'>
                                    British Indian Ocean Territory
                                  </option>
                                  <option value="BN" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bn.png\" alt=\"Brunei Darussalam\" />"}'>
                                    Brunei Darussalam
                                  </option>
                                  <option value="BG" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bg.png\" alt=\"Bulgaria\" />"}'>
                                    Bulgaria
                                  </option>
                                  <option value="BF" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bf.png\" alt=\"Burkina Faso\" />"}'>
                                    Burkina Faso
                                  </option>
                                  <option value="BI" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bi.png\" alt=\"Burundi\" />"}'>
                                    Burundi
                                  </option>
                                  <option value="CV" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cv.png\" alt=\"Cabo Verde\" />"}'>
                                    Cabo Verde
                                  </option>
                                  <option value="KH" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kh.png\" alt=\"Cambodia\" />"}'>
                                    Cambodia
                                  </option>
                                  <option value="CM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cm.png\" alt=\"Cameroon\" />"}'>
                                    Cameroon
                                  </option>
                                  <option value="CA" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ca.png\" alt=\"Canada\" />"}'>
                                    Canada
                                  </option>
                                  <option value="KY" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ky.png\" alt=\"Cayman Islands\" />"}'>
                                    Cayman Islands
                                  </option>
                                  <option value="CF" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cf.png\" alt=\"Central African Republic\" />"}'>
                                    Central African Republic
                                  </option>
                                  <option value="TD" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/td.png\" alt=\"Chad\" />"}'>
                                    Chad
                                  </option>
                                  <option value="CL" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cl.png\" alt=\"Chile\" />"}'>
                                    Chile
                                  </option>
                                  <option value="CN" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cn.png\" alt=\"China\" />"}'>
                                    China
                                  </option>
                                  <option value="CX" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cx.png\" alt=\"Christmas Island\" />"}'>
                                    Christmas Island
                                  </option>
                                  <option value="CC" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cc.png\" alt=\"Cocos (Keeling) Islands\" />"}'>
                                    Cocos (Keeling) Islands
                                  </option>
                                  <option value="CO" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/co.png\" alt=\"Colombia\" />"}'>
                                    Colombia
                                  </option>
                                  <option value="KM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/km.png\" alt=\"Comoros\" />"}'>
                                    Comoros
                                  </option>
                                  <option value="CK" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ck.png\" alt=\"Cook Islands\" />"}'>
                                    Cook Islands
                                  </option>
                                  <option value="CR" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cr.png\" alt=\"Costa Rica\" />"}'>
                                    Costa Rica
                                  </option>
                                  <option value="HR" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hr.png\" alt=\"Croatia\" />"}'>
                                    Croatia
                                  </option>
                                  <option value="CU" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cu.png\" alt=\"Cuba\" />"}'>
                                    Cuba
                                  </option>
                                  <option value="CW" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cw.png\" alt=\"Curaçao\" />"}'>
                                    Curaçao
                                  </option>
                                  <option value="CY" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cy.png\" alt=\"Cyprus\" />"}'>
                                    Cyprus
                                  </option>
                                  <option value="CZ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cz.png\" alt=\"Czech Republic\" />"}'>
                                    Czech Republic
                                  </option>
                                  <option value="CI" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ci.png\" alt=Côte dIvoire\" />"}'>
                                    Côte dIvoire
                                  </option>
                                  <option value="CD" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cd.png\" alt=\"Democratic Republic of the Congo\" />"}'>
                                    Democratic Republic of the Congo
                                  </option>
                                  <option value="DK" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dk.png\" alt=\"Denmark\" />"}'>
                                    Denmark
                                  </option>
                                  <option value="DJ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dj.png\" alt=\"Djibouti\" />"}'>
                                    Djibouti
                                  </option>
                                  <option value="DM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dm.png\" alt=\"Dominica\" />"}'>
                                    Dominica
                                  </option>
                                  <option value="DO" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/do.png\" alt=\"Dominican Republic\" />"}'>
                                    Dominican Republic
                                  </option>
                                  <option value="EC" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ec.png\" alt=\"Ecuador\" />"}'>
                                    Ecuador
                                  </option>
                                  <option value="EG" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eg.png\" alt=\"Egypt\" />"}'>
                                    Egypt
                                  </option>
                                  <option value="SV" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sv.png\" alt=\"El Salvador\" />"}'>
                                    El Salvador
                                  </option>
                                  <option value="GB-ENG" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"England\" />"}'>
                                    England
                                  </option>
                                  <option value="GQ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gq.png\" alt=\"Equatorial Guinea\" />"}'>
                                    Equatorial Guinea
                                  </option>
                                  <option value="ER" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/er.png\" alt=\"Eritrea\" />"}'>
                                    Eritrea
                                  </option>
                                  <option value="EE" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ee.png\" alt=\"Estonia\" />"}'>
                                    Estonia
                                  </option>
                                  <option value="ET" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/et.png\" alt=\"Ethiopia\" />"}'>
                                    Ethiopia
                                  </option>
                                  <option value="FK" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fk.png\" alt=\"Falkland Islands\" />"}'>
                                    Falkland Islands
                                  </option>
                                  <option value="FO" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fo.png\" alt=\"Faroe Islands\" />"}'>
                                    Faroe Islands
                                  </option>
                                  <option value="FM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fm.png\" alt=\"Federated States of Micronesia\" />"}'>
                                    Federated States of Micronesia
                                  </option>
                                  <option value="FJ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fj.png\" alt=\"Fiji\" />"}'>
                                    Fiji
                                  </option>
                                  <option value="FI" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fi.png\" alt=\"Finland\" />"}'>
                                    Finland
                                  </option>
                                  <option value="FR" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fr.png\" alt=\"France\" />"}'>
                                    France
                                  </option>
                                  <option value="GF" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gf.png\" alt=\"French Guiana\" />"}'>
                                    French Guiana
                                  </option>
                                  <option value="PF" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pf.png\" alt=\"French Polynesia\" />"}'>
                                    French Polynesia
                                  </option>
                                  <option value="TF" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tf.png\" alt=\"French Southern Territories\" />"}'>
                                    French Southern Territories
                                  </option>
                                  <option value="GA" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ga.png\" alt=\"Gabon\" />"}'>
                                    Gabon
                                  </option>
                                  <option value="GM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gm.png\" alt=\"Gambia\" />"}'>
                                    Gambia
                                  </option>
                                  <option value="GE" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ge.png\" alt=\"Georgia\" />"}'>
                                    Georgia
                                  </option>
                                  <option value="DE" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/de.png\" alt=\"Germany\" />"}'>
                                    Germany
                                  </option>
                                  <option value="GH" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gh.png\" alt=\"Ghana\" />"}'>
                                    Ghana
                                  </option>
                                  <option value="GI" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gi.png\" alt=\"Gibraltar\" />"}'>
                                    Gibraltar
                                  </option>
                                  <option value="GR" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gr.png\" alt=\"Greece\" />"}'>
                                    Greece
                                  </option>
                                  <option value="GL" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gl.png\" alt=\"Greenland\" />"}'>
                                    Greenland
                                  </option>
                                  <option value="GD" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gd.png\" alt=\"Grenada\" />"}'>
                                    Grenada
                                  </option>
                                  <option value="GP" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gp.png\" alt=\"Guadeloupe\" />"}'>
                                    Guadeloupe
                                  </option>
                                  <option value="GU" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gu.png\" alt=\"Guam\" />"}'>
                                    Guam
                                  </option>
                                  <option value="GT" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gt.png\" alt=\"Guatemala\" />"}'>
                                    Guatemala
                                  </option>
                                  <option value="GG" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gg.png\" alt=\"Guernsey\" />"}'>
                                    Guernsey
                                  </option>
                                  <option value="GN" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gn.png\" alt=\"Guinea\" />"}'>
                                    Guinea
                                  </option>
                                  <option value="GW" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gw.png\" alt=\"Guinea-Bissau\" />"}'>
                                    Guinea-Bissau
                                  </option>
                                  <option value="GY" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gy.png\" alt=\"Guyana\" />"}'>
                                    Guyana
                                  </option>
                                  <option value="HT" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ht.png\" alt=\"Haiti\" />"}'>
                                    Haiti
                                  </option>
                                  <option value="VA" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/va.png\" alt=\"Holy See\" />"}'>
                                    Holy See
                                  </option>
                                  <option value="HN" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hn.png\" alt=\"Honduras\" />"}'>
                                    Honduras
                                  </option>
                                  <option value="HK" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hk.png\" alt=\"Hong Kong\" />"}'>
                                    Hong Kong
                                  </option>
                                  <option value="HU" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hu.png\" alt=\"Hungary\" />"}'>
                                    Hungary
                                  </option>
                                  <option value="IS" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/is.png\" alt=\"Iceland\" />"}'>
                                    Iceland
                                  </option>
                                  <option value="IN" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/in.png\" alt=\"India\" />"}'>
                                    India
                                  </option>
                                  <option value="ID" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/id.png\" alt=\"Indonesia\" />"}'>
                                    Indonesia
                                  </option>
                                  <option value="IR" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ir.png\" alt=\"Iran (Islamic Republic of)\" />"}'>
                                    Iran (Islamic Republic of)
                                  </option>
                                  <option value="IQ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/iq.png\" alt=\"Iraq\" />"}'>
                                    Iraq
                                  </option>
                                  <option value="IE" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ie.png\" alt=\"Ireland\" />"}'>
                                    Ireland
                                  </option>
                                  <option value="IM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/im.png\" alt=\"Isle of Man\" />"}'>
                                    Isle of Man
                                  </option>
                                  <option value="IL" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/il.png\" alt=\"Israel\" />"}'>
                                    Israel
                                  </option>
                                  <option value="IT" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/it.png\" alt=\"Italy\" />"}'>
                                    Italy
                                  </option>
                                  <option value="JM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jm.png\" alt=\"Jamaica\" />"}'>
                                    Jamaica
                                  </option>
                                  <option value="JP" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jp.png\" alt=\"Japan\" />"}'>
                                    Japan
                                  </option>
                                  <option value="JE" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/je.png\" alt=\"Jersey\" />"}'>
                                    Jersey
                                  </option>
                                  <option value="JO" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jo.png\" alt=\"Jordan\" />"}'>
                                    Jordan
                                  </option>
                                  <option value="KZ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kz.png\" alt=\"Kazakhstan\" />"}'>
                                    Kazakhstan
                                  </option>
                                  <option value="KE" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ke.png\" alt=\"Kenya\" />"}'>
                                    Kenya
                                  </option>
                                  <option value="KI" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ki.png\" alt=\"Kiribati\" />"}'>
                                    Kiribati
                                  </option>
                                  <option value="KW" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kw.png\" alt=\"Kuwait\" />"}'>
                                    Kuwait
                                  </option>
                                  <option value="KG" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kg.png\" alt=\"Kyrgyzstan\" />"}'>
                                    Kyrgyzstan
                                  </option>
                                  <option value="LA" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/la.png\" alt=\"Laos\" />"}'>
                                    Laos
                                  </option>
                                  <option value="LV" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lv.png\" alt=\"Latvia\" />"}'>
                                    Latvia
                                  </option>
                                  <option value="LB" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lb.png\" alt=\"Lebanon\" />"}'>
                                    Lebanon
                                  </option>
                                  <option value="LS" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ls.png\" alt=\"Lesotho\" />"}'>
                                    Lesotho
                                  </option>
                                  <option value="LR" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lr.png\" alt=\"Liberia\" />"}'>
                                    Liberia
                                  </option>
                                  <option value="LY" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ly.png\" alt=\"Libya\" />"}'>
                                    Libya
                                  </option>
                                  <option value="LI" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/li.png\" alt=\"Liechtenstein\" />"}'>
                                    Liechtenstein
                                  </option>
                                  <option value="LT" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lt.png\" alt=\"Lithuania\" />"}'>
                                    Lithuania
                                  </option>
                                  <option value="LU" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lu.png\" alt=\"Luxembourg\" />"}'>
                                    Luxembourg
                                  </option>
                                  <option value="MO" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mo.png\" alt=\"Macau\" />"}'>
                                    Macau
                                  </option>
                                  <option value="MG" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mg.png\" alt=\"Madagascar\" />"}'>
                                    Madagascar
                                  </option>
                                  <option value="MW" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mw.png\" alt=\"Malawi\" />"}'>
                                    Malawi
                                  </option>
                                  <option value="MY" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/my.png\" alt=\"Malaysia\" />"}'>
                                    Malaysia
                                  </option>
                                  <option value="MV" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mv.png\" alt=\"Maldives\" />"}'>
                                    Maldives
                                  </option>
                                  <option value="ML" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ml.png\" alt=\"Mali\" />"}'>
                                    Mali
                                  </option>
                                  <option value="MT" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mt.png\" alt=\"Malta\" />"}'>
                                    Malta
                                  </option>
                                  <option value="MH" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mh.png\" alt=\"Marshall Islands\" />"}'>
                                    Marshall Islands
                                  </option>
                                  <option value="MQ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mq.png\" alt=\"Martinique\" />"}'>
                                    Martinique
                                  </option>
                                  <option value="MR" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mr.png\" alt=\"Mauritania\" />"}'>
                                    Mauritania
                                  </option>
                                  <option value="MU" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mu.png\" alt=\"Mauritius\" />"}'>
                                    Mauritius
                                  </option>
                                  <option value="YT" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/yt.png\" alt=\"Mayotte\" />"}'>
                                    Mayotte
                                  </option>
                                  <option value="MX" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mx.png\" alt=\"Mexico\" />"}'>
                                    Mexico
                                  </option>
                                  <option value="MD" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/md.png\" alt=\"Moldova\" />"}'>
                                    Moldova
                                  </option>
                                  <option value="MC" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mc.png\" alt=\"Monaco\" />"}'>
                                    Monaco
                                  </option>
                                  <option value="MN" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mn.png\" alt=\"Mongolia\" />"}'>
                                    Mongolia
                                  </option>
                                  <option value="ME" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/me.png\" alt=\"Montenegro\" />"}'>
                                    Montenegro
                                  </option>
                                  <option value="MS" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ms.png\" alt=\"Montserrat\" />"}'>
                                    Montserrat
                                  </option>
                                  <option value="MA" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ma.png\" alt=\"Morocco\" />"}'>
                                    Morocco
                                  </option>
                                  <option value="MZ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mz.png\" alt=\"Mozambique\" />"}'>
                                    Mozambique
                                  </option>
                                  <option value="MM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mm.png\" alt=\"Myanmar\" />"}'>
                                    Myanmar
                                  </option>
                                  <option value="NA" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/na.png\" alt=\"Namibia\" />"}'>
                                    Namibia
                                  </option>
                                  <option value="NR" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nr.png\" alt=\"Nauru\" />"}'>
                                    Nauru
                                  </option>
                                  <option value="NP" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/np.png\" alt=\"Nepal\" />"}'>
                                    Nepal
                                  </option>
                                  <option value="NL" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nl.png\" alt=\"Netherlands\" />"}'>
                                    Netherlands
                                  </option>
                                  <option value="NC" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nc.png\" alt=\"New Caledonia\" />"}'>
                                    New Caledonia
                                  </option>
                                  <option value="NZ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nz.png\" alt=\"New Zealand\" />"}'>
                                    New Zealand
                                  </option>
                                  <option value="NI" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ni.png\" alt=\"Nicaragua\" />"}'>
                                    Nicaragua
                                  </option>
                                  <option value="NE" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ne.png\" alt=\"Niger\" />"}'>
                                    Niger
                                  </option>
                                  <option value="NG" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ng.png\" alt=\"Nigeria\" />"}'>
                                    Nigeria
                                  </option>
                                  <option value="NU" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nu.png\" alt=\"Niue\" />"}'>
                                    Niue
                                  </option>
                                  <option value="NF" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nf.png\" alt=\"Norfolk Island\" />"}'>
                                    Norfolk Island
                                  </option>
                                  <option value="KP" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kp.png\" alt=\"North Korea\" />"}'>
                                    North Korea
                                  </option>
                                  <option value="MK" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mk.png\" alt=\"North Macedonia\" />"}'>
                                    North Macedonia
                                  </option>
                                  <option value="GB-NIR" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Northern Ireland\" />"}'>
                                    Northern Ireland
                                  </option>
                                  <option value="MP" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mp.png\" alt=\"Northern Mariana Islands\" />"}'>
                                    Northern Mariana Islands
                                  </option>
                                  <option value="NO" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/no.png\" alt=\"Norway\" />"}'>
                                    Norway
                                  </option>
                                  <option value="OM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/om.png\" alt=\"Oman\" />"}'>
                                    Oman
                                  </option>
                                  <option value="PK" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pk.png\" alt=\"Pakistan\" />"}'>
                                    Pakistan
                                  </option>
                                  <option value="PW" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pw.png\" alt=\"Palau\" />"}'>
                                    Palau
                                  </option>
                                  <option value="PA" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pa.png\" alt=\"Panama\" />"}'>
                                    Panama
                                  </option>
                                  <option value="PG" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pg.png\" alt=\"Papua New Guinea\" />"}'>
                                    Papua New Guinea
                                  </option>
                                  <option value="PY" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/py.png\" alt=\"Paraguay\" />"}'>
                                    Paraguay
                                  </option>
                                  <option value="PE" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pe.png\" alt=\"Peru\" />"}'>
                                    Peru
                                  </option>
                                  <option value="PH" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ph.png\" alt=\"Philippines\" />"}'>
                                    Philippines
                                  </option>
                                  <option value="PN" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pn.png\" alt=\"Pitcairn\" />"}'>
                                    Pitcairn
                                  </option>
                                  <option value="PL" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pl.png\" alt=\"Poland\" />"}'>
                                    Poland
                                  </option>
                                  <option value="PT" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pt.png\" alt=\"Portugal\" />"}'>
                                    Portugal
                                  </option>
                                  <option value="PR" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pr.png\" alt=\"Puerto Rico\" />"}'>
                                    Puerto Rico
                                  </option>
                                  <option value="QA" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/qa.png\" alt=\"Qatar\" />"}'>
                                    Qatar
                                  </option>
                                  <option value="CG" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cg.png\" alt=\"Republic of the Congo\" />"}'>
                                    Republic of the Congo
                                  </option>
                                  <option value="RO" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ro.png\" alt=\"Romania\" />"}'>
                                    Romania
                                  </option>
                                  <option value="RU" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ru.png\" alt=\"Russia\" />"}'>
                                    Russia
                                  </option>
                                  <option value="RW" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/rw.png\" alt=\"Rwanda\" />"}'>
                                    Rwanda
                                  </option>
                                  <option value="RE" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/re.png\" alt=\"Réunion\" />"}'>
                                    Réunion
                                  </option>
                                  <option value="BL" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bl.png\" alt=\"Saint Barthélemy\" />"}'>
                                    Saint Barthélemy
                                  </option>
                                  <option value="SH" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sh.png\" alt=\"Saint Helena, Ascension and Tristan da Cunha\" />"}'>
                                    Saint Helena, Ascension and Tristan da Cunha
                                  </option>
                                  <option value="KN" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kn.png\" alt=\"Saint Kitts and Nevis\" />"}'>
                                    Saint Kitts and Nevis
                                  </option>
                                  <option value="LC" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lc.png\" alt=\"Saint Lucia\" />"}'>
                                    Saint Lucia
                                  </option>
                                  <option value="MF" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mf.png\" alt=\"Saint Martin\" />"}'>
                                    Saint Martin
                                  </option>
                                  <option value="PM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pm.png\" alt=\"Saint Pierre and Miquelon\" />"}'>
                                    Saint Pierre and Miquelon
                                  </option>
                                  <option value="VC" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vc.png\" alt=\"Saint Vincent and the Grenadines\" />"}'>
                                    Saint Vincent and the Grenadines
                                  </option>
                                  <option value="WS" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ws.png\" alt=\"Samoa\" />"}'>
                                    Samoa
                                  </option>
                                  <option value="SM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sm.png\" alt=\"San Marino\" />"}'>
                                    San Marino
                                  </option>
                                  <option value="ST" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/st.png\" alt=\"Sao Tome and Principe\" />"}'>
                                    Sao Tome and Principe
                                  </option>
                                  <option value="SA" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sa.png\" alt=\"Saudi Arabia\" />"}'>
                                    Saudi Arabia
                                  </option>
                                  <option value="GB-SCT" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Scotland\" />"}'>
                                    Scotland
                                  </option>
                                  <option value="SN" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sn.png\" alt=\"Senegal\" />"}'>
                                    Senegal
                                  </option>
                                  <option value="RS" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/rs.png\" alt=\"Serbia\" />"}'>
                                    Serbia
                                  </option>
                                  <option value="SC" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sc.png\" alt=\"Seychelles\" />"}'>
                                    Seychelles
                                  </option>
                                  <option value="SL" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sl.png\" alt=\"Sierra Leone\" />"}'>
                                    Sierra Leone
                                  </option>
                                  <option value="SG" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sg.png\" alt=\"Singapore\" />"}'>
                                    Singapore
                                  </option>
                                  <option value="SX" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sx.png\" alt=\"Sint Maarten\" />"}'>
                                    Sint Maarten
                                  </option>
                                  <option value="SK" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sk.png\" alt=\"Slovakia\" />"}'>
                                    Slovakia
                                  </option>
                                  <option value="SI" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/si.png\" alt=\"Slovenia\" />"}'>
                                    Slovenia
                                  </option>
                                  <option value="SB" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sb.png\" alt=\"Solomon Islands\" />"}'>
                                    Solomon Islands
                                  </option>
                                  <option value="SO" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/so.png\" alt=\"Somalia\" />"}'>
                                    Somalia
                                  </option>
                                  <option value="ZA" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/za.png\" alt=\"South Africa\" />"}'>
                                    South Africa
                                  </option>
                                  <option value="GS" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gs.png\" alt=\"South Georgia and the South Sandwich Islands\" />"}'>
                                    South Georgia and the South Sandwich Islands
                                  </option>
                                  <option value="KR" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kr.png\" alt=\"South Korea\" />"}'>
                                    South Korea
                                  </option>
                                  <option value="SS" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ss.png\" alt=\"South Sudan\" />"}'>
                                    South Sudan
                                  </option>
                                  <option value="ES" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/es.png\" alt=\"Spain\" />"}'>
                                    Spain
                                  </option>
                                  <option value="LK" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lk.png\" alt=\"Sri Lanka\" />"}'>
                                    Sri Lanka
                                  </option>
                                  <option value="PS" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ps.png\" alt=\"State of Palestine\" />"}'>
                                    State of Palestine
                                  </option>
                                  <option value="SD" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sd.png\" alt=\"Sudan\" />"}'>
                                    Sudan
                                  </option>
                                  <option value="SR" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sr.png\" alt=\"Suriname\" />"}'>
                                    Suriname
                                  </option>
                                  <option value="SJ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sj.png\" alt=\"Svalbard and Jan Mayen\" />"}'>
                                    Svalbard and Jan Mayen
                                  </option>
                                  <option value="SZ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sz.png\" alt=\"Swaziland\" />"}'>
                                    Swaziland
                                  </option>
                                  <option value="SE" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/se.png\" alt=\"Sweden\" />"}'>
                                    Sweden
                                  </option>
                                  <option value="CH" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ch.png\" alt=\"Switzerland\" />"}'>
                                    Switzerland
                                  </option>
                                  <option value="SY" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sy.png\" alt=\"Syrian Arab Republic\" />"}'>
                                    Syrian Arab Republic
                                  </option>
                                  <option value="TW" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tw.png\" alt=\"Taiwan\" />"}'>
                                    Taiwan
                                  </option>
                                  <option value="TJ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tj.png\" alt=\"Tajikistan\" />"}'>
                                    Tajikistan
                                  </option>
                                  <option value="TZ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tz.png\" alt=\"Tanzania\" />"}'>
                                    Tanzania
                                  </option>
                                  <option value="TH" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/th.png\" alt=\"Thailand\" />"}'>
                                    Thailand
                                  </option>
                                  <option value="TL" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tl.png\" alt=\"Timor-Leste\" />"}'>
                                    Timor-Leste
                                  </option>
                                  <option value="TG" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tg.png\" alt=\"Togo\" />"}'>
                                    Togo
                                  </option>
                                  <option value="TK" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tk.png\" alt=\"Tokelau\" />"}'>
                                    Tokelau
                                  </option>
                                  <option value="TO" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/to.png\" alt=\"Tonga\" />"}'>
                                    Tonga
                                  </option>
                                  <option value="TT" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tt.png\" alt=\"Trinidad and Tobago\" />"}'>
                                    Trinidad and Tobago
                                  </option>
                                  <option value="TN" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tn.png\" alt=\"Tunisia\" />"}'>
                                    Tunisia
                                  </option>
                                  <option value="TR" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tr.png\" alt=\"Turkey\" />"}'>
                                    Turkey
                                  </option>
                                  <option value="TM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tm.png\" alt=\"Turkmenistan\" />"}'>
                                    Turkmenistan
                                  </option>
                                  <option value="TC" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tc.png\" alt=\"Turks and Caicos Islands\" />"}'>
                                    Turks and Caicos Islands
                                  </option>
                                  <option value="TV" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tv.png\" alt=\"Tuvalu\" />"}'>
                                    Tuvalu
                                  </option>
                                  <option value="UG" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ug.png\" alt=\"Uganda\" />"}'>
                                    Uganda
                                  </option>
                                  <option value="UA" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ua.png\" alt=\"Ukraine\" />"}'>
                                    Ukraine
                                  </option>
                                  <option value="AE" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ae.png\" alt=\"United Arab Emirates\" />"}'>
                                    United Arab Emirates
                                  </option>
                                  <option value="GB" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"United Kingdom\" />"}'>
                                    United Kingdom
                                  </option>
                                  <option value="UM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/um.png\" alt=\"United States Minor Outlying Islands\" />"}'>
                                    United States Minor Outlying Islands
                                  </option>
                                  <option selected value="US" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/us.png\" alt=\"United States of America\" />"}'>
                                    United States of America
                                  </option>
                                  <option value="UY" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/uy.png\" alt=\"Uruguay\" />"}'>
                                    Uruguay
                                  </option>
                                  <option value="UZ" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/uz.png\" alt=\"Uzbekistan\" />"}'>
                                    Uzbekistan
                                  </option>
                                  <option value="VU" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vu.png\" alt=\"Vanuatu\" />"}'>
                                    Vanuatu
                                  </option>
                                  <option value="VE" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ve.png\" alt=\"Venezuela (Bolivarian Republic of)\" />"}'>
                                    Venezuela (Bolivarian Republic of)
                                  </option>
                                  <option value="VN" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vn.png\" alt=\"Vietnam\" />"}'>
                                    Vietnam
                                  </option>
                                  <option value="VG" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vg.png\" alt=\"Virgin Islands (British)\" />"}'>
                                    Virgin Islands (British)
                                  </option>
                                  <option value="VI" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vi.png\" alt=\"Virgin Islands (U.S.)\" />"}'>
                                    Virgin Islands (U.S.)
                                  </option>
                                  <option value="GB-WLS" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Wales\" />"}'>
                                    Wales
                                  </option>
                                  <option value="WF" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/wf.png\" alt=\"Wallis and Futuna\" />"}'>
                                    Wallis and Futuna
                                  </option>
                                  <option value="EH" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eh.png\" alt=\"Western Sahara\" />"}'>
                                    Western Sahara
                                  </option>
                                  <option value="YE" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ye.png\" alt=\"Yemen\" />"}'>
                                    Yemen
                                  </option>
                                  <option value="ZM" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/zm.png\" alt=\"Zambia\" />"}'>
                                    Zambia
                                  </option>
                                  <option value="ZW" data-hs-select-option='{
                                    "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/zw.png\" alt=\"Zimbabwe\" />"}'>
                                    Zimbabwe
                                  </option>
                                </select>
                              </div>
                              
                            </div>

<div>
                              <label class="block mb-2 text-sm font-medium text-foreground">
                                Currency
                              </label>

<div class="relative">
                                <select data-hs-select='{
                                    "placeholder": "Select currency",
                                    "hasSearch": true,
                                    "searchPlaceholder": "Select currency",
                                    "searchClasses": "py-1.5 sm:py-2 px-3 block w-full sm:text-sm bg-transparent border-line-2 rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus",
                                    "searchWrapperClasses": "bg-select p-2 -mx-1 sticky top-0",
                                    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"flex\" data-icon></span><span class=\"text-foreground\" data-title></span></button>",
                                    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary",
                                    "dropdownClasses": "z-80 max-h-72 p-1 pt-0 space-y-0.5 z-50 w-full overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                    "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                                    "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"text-foreground\" data-title></div></div></div>",
                                    "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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></div>",
                                    "dropdownScope": "window",
                                    "viewport": "#hs-pro-shnlm-body"
                                  }' class="hidden">
                                  <option value="">Choose</option>
                                  <option value="USD" selected>USD</option>
                                  <option value="AED">AED</option>
                                  <option value="AFN">AFN</option>
                                  <option value="ALL">ALL</option>
                                  <option value="AMD">AMD</option>
                                  <option value="ANG">ANG</option>
                                  <option value="AOA">AOA</option>
                                  <option value="ARS">ARS</option>
                                  <option value="AUD">AUD</option>
                                  <option value="AWG">AWG</option>
                                  <option value="AZN">AZN</option>
                                  <option value="BAM">BAM</option>
                                  <option value="BBD">BBD</option>
                                  <option value="BDT">BDT</option>
                                  <option value="BGN">BGN</option>
                                  <option value="BIF">BIF</option>
                                  <option value="BMD">BMD</option>
                                  <option value="BND">BND</option>
                                  <option value="BOB">BOB</option>
                                  <option value="BRL">BRL</option>
                                  <option value="BSD">BSD</option>
                                  <option value="BWP">BWP</option>
                                  <option value="BZD">BZD</option>
                                  <option value="CAD">CAD</option>
                                  <option value="CDF">CDF</option>
                                  <option value="CHF">CHF</option>
                                  <option value="CLP">CLP</option>
                                  <option value="CNY">CNY</option>
                                  <option value="COP">COP</option>
                                  <option value="CRC">CRC</option>
                                  <option value="CVE">CVE</option>
                                  <option value="CZK">CZK</option>
                                  <option value="DJF">DJF</option>
                                  <option value="DKK">DKK</option>
                                  <option value="DOP">DOP</option>
                                  <option value="DZD">DZD</option>
                                  <option value="EGP">EGP</option>
                                  <option value="ETB">ETB</option>
                                  <option value="EUR">EUR</option>
                                  <option value="FJD">FJD</option>
                                  <option value="FKP">FKP</option>
                                  <option value="GBP">GBP</option>
                                  <option value="GEL">GEL</option>
                                  <option value="GIP">GIP</option>
                                  <option value="GMD">GMD</option>
                                  <option value="GNF">GNF</option>
                                  <option value="GTQ">GTQ</option>
                                  <option value="GYD">GYD</option>
                                  <option value="HKD">HKD</option>
                                  <option value="HNL">HNL</option>
                                  <option value="HRK">HRK</option>
                                  <option value="HTG">HTG</option>
                                  <option value="HUF">HUF</option>
                                  <option value="IDR">IDR</option>
                                  <option value="ILS">ILS</option>
                                  <option value="INR">INR</option>
                                  <option value="ISK">ISK</option>
                                  <option value="JMD">JMD</option>
                                  <option value="JPY">JPY</option>
                                  <option value="KES">KES</option>
                                  <option value="KGS">KGS</option>
                                  <option value="KHR">KHR</option>
                                  <option value="KMF">KMF</option>
                                  <option value="KRW">KRW</option>
                                  <option value="KYD">KYD</option>
                                  <option value="KZT">KZT</option>
                                  <option value="LAK">LAK</option>
                                  <option value="LBP">LBP</option>
                                  <option value="LKR">LKR</option>
                                  <option value="LRD">LRD</option>
                                  <option value="LSL">LSL</option>
                                  <option value="MAD">MAD</option>
                                  <option value="MDL">MDL</option>
                                  <option value="MGA">MGA</option>
                                  <option value="MKD">MKD</option>
                                  <option value="MMK">MMK</option>
                                  <option value="MNT">MNT</option>
                                  <option value="MOP">MOP</option>
                                  <option value="MRO">MRO</option>
                                  <option value="MUR">MUR</option>
                                  <option value="MVR">MVR</option>
                                  <option value="MWK">MWK</option>
                                  <option value="MXN">MXN</option>
                                  <option value="MYR">MYR</option>
                                  <option value="MZN">MZN</option>
                                  <option value="NAD">NAD</option>
                                  <option value="NGN">NGN</option>
                                  <option value="NIO">NIO</option>
                                  <option value="NOK">NOK</option>
                                  <option value="NPR">NPR</option>
                                  <option value="NZD">NZD</option>
                                  <option value="PAB">PAB</option>
                                  <option value="PEN">PEN</option>
                                  <option value="PGK">PGK</option>
                                  <option value="PHP">PHP</option>
                                  <option value="PKR">PKR</option>
                                  <option value="PLN">PLN</option>
                                  <option value="PYG">PYG</option>
                                  <option value="QAR">QAR</option>
                                  <option value="RON">RON</option>
                                  <option value="RSD">RSD</option>
                                  <option value="RUB">RUB</option>
                                  <option value="RWF">RWF</option>
                                  <option value="SAR">SAR</option>
                                  <option value="SBD">SBD</option>
                                  <option value="SCR">SCR</option>
                                  <option value="SEK">SEK</option>
                                  <option value="SGD">SGD</option>
                                  <option value="SHP">SHP</option>
                                  <option value="SLL">SLL</option>
                                  <option value="SOS">SOS</option>
                                  <option value="SRD">SRD</option>
                                  <option value="STD">STD</option>
                                  <option value="SZL">SZL</option>
                                  <option value="THB">THB</option>
                                  <option value="TJS">TJS</option>
                                  <option value="TOP">TOP</option>
                                  <option value="TRY">TRY</option>
                                  <option value="TTD">TTD</option>
                                  <option value="TWD">TWD</option>
                                  <option value="TZS">TZS</option>
                                  <option value="UAH">UAH</option>
                                  <option value="UGX">UGX</option>
                                  <option value="UYU">UYU</option>
                                  <option value="UZS">UZS</option>
                                  <option value="VND">VND</option>
                                  <option value="VUV">VUV</option>
                                  <option value="WST">WST</option>
                                  <option value="XAF">XAF</option>
                                  <option value="XCD">XCD</option>
                                  <option value="XOF">XOF</option>
                                  <option value="XPF">XPF</option>
                                  <option value="YER">YER</option>
                                  <option value="ZAR">ZAR</option>
                                  <option value="ZMW">ZMW</option>
                                </select>
                              </div>
                              
                            </div>

<p class="text-[13px] text-muted-foreground-1">
                              By continuing, you accept the <a class="text-muted-foreground-1 underline-offset-4 underline hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Terms and Conditions</a> of your chosen country or region.
                            </p>
                          </div>
                        </div>

<div class="p-6 pt-2 md:p-8 md:pt-2 flex flex-col gap-2">
                          <button type="button" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-hover" data-hs-overlay="#hs-pro-shnrsm">
                            Accept
                          </button>

<div class="text-center">
                            <button type="button" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-1.5 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-overlay="#hs-pro-shnrsm">
                              Cancel
                            </button>
                          </div>
                        </div>
                        
                      </div>
                    </div>
                  </div>

<div id="hs-pro-shmnlcm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-shmnlcm-label">
                    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-md sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                      <div class="w-full max-h-full relative overflow-hidden flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                        
                        <div class="py-4 px-6 flex justify-between items-center border-b border-overlay-divider">
                          <h2 id="hs-pro-shmnlcm-label" class="font-medium text-foreground">
                            Choose your location
                          </h2>
                          <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-shmnlcm">
                            <span class="sr-only">Close</span>
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 id="hs-pro-shmnlcm-body" class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <div class="p-6 space-y-5">
                            <p class="text-[13px] text-foreground">
                              Delivery options and delivery speeds may vary for different locations
                            </p>

<div class="p-0.5 space-y-2">
                              
                              <label for="hs-pro-shmarach1" class="p-3 block text-sm bg-layer text-layer-foreground rounded-xl cursor-pointer rounded-xl ring-1 ring-layer-line hover:bg-layer-hover focus:bg-layer-focus has-checked:ring-2 has-checked:ring-primary-checked">
                                <span class="flex gap-x-2.5">
                                  <input type="radio" id="hs-pro-shmarach1" class="size-4 bg-transparent border-line-3 rounded-full checked:bg-primary-checked checked:border-primary-checked focus:ring-0 focus:ring-offset-0" name="hs-pro-shmaracho" value="James Collins" checked>
                                  <span class="grow -mt-0.5">
                                    <span class="block font-semibold">
                                      James Collins
                                      <span class="ms-1 py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-full bg-surface-1 text-layer-foreground">Default</span>
                                    </span>
                                    <span class="block text-sm/6 text-muted-foreground-1">
                                      2305 Coney Island Ave, Brooklyn NY 11223
                                    </span>
                                  </span>
                                </span>
                              </label>

<label for="hs-pro-shmarach2" class="p-3 block text-sm bg-layer text-layer-foreground rounded-xl cursor-pointer rounded-xl ring-1 ring-layer-line hover:bg-layer-hover focus:bg-layer-focus has-checked:ring-2 has-checked:ring-primary-checked">
                                <span class="flex gap-x-2.5">
                                  <input type="radio" id="hs-pro-shmarach2" class="size-4 bg-transparent border-line-3 rounded-full checked:bg-primary-checked checked:border-primary-checked focus:ring-0 focus:ring-offset-0" name="hs-pro-shmaracho" value="James Collins" >
                                  <span class="grow -mt-0.5">
                                    <span class="block font-semibold">
                                      James Collins
                                    </span>
                                    <span class="block text-sm/6 text-muted-foreground-1">
                                      Im Wiegenfeld 4 85570 Markt Schwaben, Markt Schwaben 85570
                                    </span>
                                  </span>
                                </span>
                              </label>

<label for="hs-pro-shmarach3" class="p-3 block text-sm bg-layer text-layer-foreground rounded-xl cursor-pointer rounded-xl ring-1 ring-layer-line hover:bg-layer-hover focus:bg-layer-focus has-checked:ring-2 has-checked:ring-primary-checked">
                                <span class="flex gap-x-2.5">
                                  <input type="radio" id="hs-pro-shmarach3" class="size-4 bg-transparent border-line-3 rounded-full checked:bg-primary-checked checked:border-primary-checked focus:ring-0 focus:ring-offset-0" name="hs-pro-shmaracho" value="James Collins" >
                                  <span class="grow -mt-0.5">
                                    <span class="block font-semibold">
                                      James Collins
                                    </span>
                                    <span class="block text-sm/6 text-muted-foreground-1">
                                      109 Rogers Rd Ste 3 WS003536, Wilmington DE 19801
                                    </span>
                                  </span>
                                </span>
                              </label>

<div id="hs-shnlmsaa-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-shnlmsaa" role="region">
                                <div class="p-0.5 space-y-2">
                                  
                                  <label for="hs-pro-shmarach4" class="p-3 block text-sm bg-layer text-layer-foreground rounded-xl cursor-pointer rounded-xl ring-1 ring-layer-line hover:bg-layer-hover focus:bg-layer-focus has-checked:ring-2 has-checked:ring-primary-checked">
                                    <span class="flex gap-x-2.5">
                                      <input type="radio" id="hs-pro-shmarach4" class="size-4 bg-transparent border-line-3 rounded-full checked:bg-primary-checked checked:border-primary-checked focus:ring-0 focus:ring-offset-0" name="hs-pro-shmaracho" value="James Collins" >
                                      <span class="grow -mt-0.5">
                                        <span class="block font-semibold">
                                          James Collins
                                        </span>
                                        <span class="block text-sm/6 text-muted-foreground-1">
                                          645 W 1ST AVE C/O 3536-WS, ROSELLE NJ 07203
                                        </span>
                                      </span>
                                    </span>
                                  </label>

<label for="hs-pro-shmarach5" class="p-3 block text-sm bg-layer text-layer-foreground rounded-xl cursor-pointer rounded-xl ring-1 ring-layer-line hover:bg-layer-hover focus:bg-layer-focus has-checked:ring-2 has-checked:ring-primary-checked">
                                    <span class="flex gap-x-2.5">
                                      <input type="radio" id="hs-pro-shmarach5" class="size-4 bg-transparent border-line-3 rounded-full checked:bg-primary-checked checked:border-primary-checked focus:ring-0 focus:ring-offset-0" name="hs-pro-shmaracho" value="James Collins" >
                                      <span class="grow -mt-0.5">
                                        <span class="block font-semibold">
                                          James Collins
                                        </span>
                                        <span class="block text-sm/6 text-muted-foreground-1">
                                          Arch 294 Jewell Street, London SE5 OBU
                                        </span>
                                      </span>
                                    </span>
                                  </label>
                                  
                                </div>
                              </div>
                            </div>

<ul class="flex flex-wrap items-center gap-2">
                              <li class="inline-flex items-center relative ps-3 first:ps-0 first:after:hidden after:absolute after:top-1/2 after:inset-s-0 after:inline-block after:h-3 after:border-s after:border-line-3 after:-translate-y-1/2">
                                <button type="button" class="hs-collapse-toggle hs-collapse-open:hidden font-medium text-sm text-primary underline-offset-4 hover:underline hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" id="hs-shnlmsaa" aria-expanded="false" aria-controls="hs-shnlmsaa-heading" data-hs-collapse="#hs-shnlmsaa-heading">
                                  See all
                                </button>
                              </li>
                              <li class="inline-flex items-center relative ps-3 first:ps-0 first:after:hidden after:absolute after:top-1/2 after:inset-s-0 after:inline-block after:h-3 after:border-s after:border-line-3 after:-translate-y-1/2">
                                <a class="font-medium text-sm text-primary underline-offset-4 hover:underline hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">
                                  Manage address book
                                </a>
                              </li>
                            </ul>
                          </div>
                        </div>

<div class="p-6 pt-2 md:pt-2 flex flex-col gap-2">
                          <button type="button" class="py-2.5 px-4 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-hover" data-hs-overlay="#hs-pro-shmnlcm">
                            Done
                          </button>

<div class="text-center">
                            <button type="button" class="py-2.5 px-4 w-full inline-flex justify-center items-center gap-x-1.5 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-overlay="#hs-pro-shmnlcm">
                              Cancel
                            </button>
                          </div>
                        </div>
                        
                      </div>
                    </div>
                  </div>

Open Marketplace homepage

Navigation links stay centered while account and shopping actions fill the right side of the bar.

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                              <button id="hs-pro-dnnd" type="button" class="relative shrink-0 inline-flex justify-center items-center gap-x-2 size-9.5 rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg>
                                <span class="flex absolute top-0 inset-e-0 z-10 -mt-1 -me-1">
                                  <span class="relative min-w-4.5 min-h-4.5 inline-flex justify-center items-center text-[10px] bg-secondary text-secondary-foreground rounded-full px-1">
                                    2
                                    <span class="sr-only">Notifications</span>
                                  </span>
                                </span>
                              </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-150 hs-dropdown-open:opacity-100 opacity-0 w-full sm:w-96 hidden z-10 bg-dropdown border-y sm:border-x border-dropdown-line sm:border-line-1 sm:mt-2 sm:rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnnd">
                                <div class="py-4 px-6">
                                  <span class="block font-medium text-foreground">
                                    Favorites
                                  </span>
                                </div>

<div class="grow flex flex-col">
                                        <p class="text-sm text-foreground">
                                          Everyday Solid Black T-Shirt
                                        </p>
                                        <span class="mt-1.5">
                                          <span class="text-sm text-muted-foreground-1">
                                            <s>$60</s>
                                          </span>
                                          <span class="text-sm text-red-500">
                                            $40
                                          </span>
                                        </span>

<div class="">
                                          <button type="button" class="inline-flex items-center gap-x-1.5 text-[13px] text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-remove-element="#hs-pro-shfdi1">
                                            Remove
                                          </button>
                                        </div>
                                      </div>
                                    </div>

<div id="hs-pro-shfdi2" class="hs-removing:opacity-0 duration-300 flex gap-x-5">
                                      <div class="relative">
                                        <img class="shrink-0 w-20 h-28 object-cover rounded-lg" src="https://images.unsplash.com/photo-1699595749116-33a4a869503c?q=80&w=320&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      </div>

<div class="grow flex flex-col">
                                        <p class="text-sm text-foreground">
                                          Nike Air Force 1
                                        </p>

<div class="">
                                          <button type="button" class="inline-flex items-center gap-x-1.5 text-[13px] text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-remove-element="#hs-pro-shfdi2">
                                            Remove
                                          </button>
                                        </div>
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>

<div class="py-4 px-6 text-center">
                                  <a class="inline-flex justify-center items-center font-medium text-sm text-foreground underline underline-offset-4 decoration-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/favorites.html">
                                    View favorites
                                  </a>
                                </div>
                              </div>
                            </div>

<button type="button" class="relative shrink-0 inline-flex justify-center items-center gap-x-2 size-9.5 rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" data-hs-overlay="#hs-pro-shco">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
                              <span class="flex absolute top-0 inset-e-0 z-10 -mt-1 -me-1">
                                <span class="relative min-w-4.5 min-h-4.5 inline-flex justify-center items-center text-[10px] bg-secondary text-secondary-foreground rounded-full px-1">
                                  3
                                  <span class="sr-only">Notifications</span>
                                </span>
                              </span>
                            </button>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                              <button id="hs-pro-shadnli" type="button" class="relative shrink-0 inline-flex justify-center items-center gap-x-2 size-9.5 rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                <img class="shrink-0 size-8 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                              </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-150 hs-dropdown-open:opacity-100 opacity-0 w-full sm:w-72 hidden z-10 bg-dropdown border-y sm:border-x border-dropdown-line sm:border-line-1 sm:mt-2 sm:rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shadnli">
                                <div class="p-2">
                                  
                                  <a class="py-2 px-2.5 flex items-center gap-3 rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/account.html">
                                    <img class="shrink-0 size-10 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">

<div class="grow">
                                      <span class="block font-medium text-sm text-foreground">
                                        James Collins
                                      </span>
                                      <p class="text-xs text-muted-foreground-1">
                                        jamescollins@site.so
                                      </p>
                                    </div>
                                  </a>

<ul class="flex flex-col space-y-0.5">
                                    <li>
                                      <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/personal-info.html">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                        Personal Info
                                      </a>
                                    </li>

<li>
                                      <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/my-orders.html">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
                                        My Orders
                                      </a>
                                    </li>

<li>
                                      <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/order-details.html">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M8 7v10"/><path d="M12 7v10"/><path d="M17 7v10"/></svg>
                                        Order Details
                                      </a>
                                    </li>

<li>
                                      <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/addresses.html">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22a1 1 0 0 1-1-1v-4a1 1 0 0 1 .445-.832l3-2a1 1 0 0 1 1.11 0l3 2A1 1 0 0 1 22 17v4a1 1 0 0 1-1 1z"/><path d="M18 10a8 8 0 0 0-16 0c0 4.993 5.539 10.193 7.399 11.799a1 1 0 0 0 .601.2"/><path d="M18 22v-3"/><circle cx="10" cy="10" r="3"/></svg>
                                        Addresses
                                      </a>
                                    </li>

<li>
                                      <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/payment.html">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
                                        Payment
                                      </a>
                                    </li>

<li>
                                      <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/email-newsletter.html">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                                        Email Newsletter
                                      </a>
                                    </li>
                                  </ul>

<ul class="flex flex-col space-y-0.5">
                                    <li>
                                      <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/gift-cards.html">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg>
                                        Gift Cards
                                      </a>
                                    </li>

<li>
                                      <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/returns-and-refunds.html">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
                                        Returns & Refunds
                                      </a>
                                    </li>
                                  </ul>

<p>
                                    <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover hover:text-destructive focus:outline-hidden focus:bg-muted-focus focus:text-destructive">
                                      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
                                      Logout
                                    </button>
                                  </p>
                                </div>
                              </div>
                            </div>
                            
                          </div>

<div class="md:col-span-3 order-3 md:order-2 basis-full grow md:basis-auto md:grow-0">
                          
                          <div id="hs-pro-dmh" class="hs-overlay hs-overlay-open:translate-x-0 [--auto-close:md]
                          -translate-x-full md:translate-none transition-all duration-300 transform
                          size-full sm:w-96 bg-navbar
                          hidden
                          fixed top-0 inset-s-0 z-60
                          md:static md:block md:h-auto md:w-full md:transition-none md:transform-none md:z-40" role="dialog" tabindex="-1" aria-label="Sidebar" data-hs-overlay-close-on-resize>
                            <div class="overflow-hidden overflow-y-auto h-full [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                              
                              <div class="py-3 px-6 md:hidden flex justify-between items-center border-b border-overlay-divider">
                                <h2  class="font-medium text-foreground">
                                  Menu
                                </h2>
                                <button type="button" class="py-1.5 px-2 inline-flex justify-center items-center gap-x-1 rounded-full bg-layer border border-layer-line text-xs text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-pro-dmh">
                                  <span class="hidden lg:block">Esc</span>
                                  <span class="block lg:hidden">Close</span>
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 class="md:flex md:justify-center md:items-center py-4 px-6 md:p-0">
                                
                                <div class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] [--auto-close:inside] md:inline-block">
                                  
                                  <button id="hs-pro-shnnd6" type="button" class="hs-dropdown-toggle py-3 md:py-5 md:px-4 lg:px-5 w-full md:w-auto flex items-center text-sm text-start text-navbar-nav-foreground rounded-lg underline-offset-4 hover:underline disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:underline" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <span class="relative">
                                      Pages
                                      <span class="absolute -top-1 -inset-e-2">
                                        <span class="relative flex">
                                          <span class="animate-ping absolute inline-flex size-full rounded-full bg-primary-400 opacity-75 dark:bg-primary-600"></span>
                                          <span class="relative inline-flex rounded-full size-2 bg-primary-500"></span>
                                          <span class="sr-only">Current</span>
                                        </span>
                                      </span>
                                    </span>
                                    <svg class="md:hidden hs-dropdown-open:-rotate-180 md:hs-dropdown-open:rotate-0 duration-300 ms-auto md:ms-2 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

<div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Checkouts</span>

<ul class="grid space-y-2">
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/cart.html">Cart</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/empty-cart.html">Empty Cart</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/checkout.html">Checkout (as Guest)</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/checkout-logged-in.html">Checkout (Logged In)</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/review-and-pay.html">Review and Pay</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/order-confirmation.html">Order Confirmation</a></li>
                                            </ul>
                                          </div>
                                        </div>
                                        
              
                                        <div class="space-y-7 md:space-y-10">
                                          <div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Product Details</span>
                  
                                            <ul class="grid space-y-2">
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/product-detail.html">Gallery Slider</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/product-detail-sticky-sidebar.html">Sticky Sidebar</a></li>
                                            </ul>
                                          </div>
                
                                          <div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Listings</span>
                  
                                            <ul class="grid space-y-2">
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/listing-grid.html">Grid</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/listing-grid-with-sidebar.html">Grid with Sidebar</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/listing-grid-with-categories.html">Grid with Categories</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/listing-grid-with-mini-categories.html">Grid with Mini Categories</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/listing-grid-with-hero.html">Grid with Hero</a></li>
                                            </ul>
                                          </div>
                                        </div>
                                        
              
                                        <div class="space-y-7 md:space-y-10">
                                          <div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Categories</span>
                  
                                            <ul class="grid space-y-2">
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/categories.html">Categories</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/categories-with-sidebar.html">Categories with Sidebar</a></li>
                                            </ul>
                                          </div>
                
                                          <div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Authentication</span>
                  
                                            <ul class="grid space-y-2">
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/login.html">Log In</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/create-account.html">Create Account</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/forgot-password.html">Forgot Password</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/checkout-not-logged-in.html">Checkout not Logged-In</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/order-checkup.html">Order Checkup</a></li>
                                            </ul>
                                          </div>
                                        </div>
                                        
              
                                        <div class="space-y-7 md:space-y-10">
                                          <div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Account</span>

<ul class="grid space-y-2">
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/account.html">Account</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/personal-info.html">Personal Info</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/my-orders.html">My Orders</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/order-details.html">Order Details</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/addresses.html">Addresses</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/payment.html">Payment</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/gift-cards.html">Gift Cards</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/email-newsletter.html">Email Newsletter</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/returns-and-refunds.html">Returns & Refunds</a></li>
                                            </ul>
                                          </div>
                                        </div>
                                        
              
                                        <div class="space-y-7 md:space-y-10">
                                          <div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Miscellaneous</span>
                  
                                            <ul class="grid space-y-2">
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/our-stores.html">Our Stores</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/help.html">Help</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/help-about-topic.html">Help: About Topic</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/check-order.html">Check Order</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/order-status.html">Order Status</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/compare-products.html">Compare Products</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/write-a-product-review.html">Write a Product Review</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/favorites.html">Favorites</a></li>
                                              <li><a class="text-sm underline-offset-4 hover:underline focus:outline-hidden focus:underline text-muted-foreground-1 hover:text-foreground focus:text-foreground" href="../../../templates/ecommerce/storefront/exchange-or-return.html">Exchange or Return</a></li>
                                            </ul>
                                          </div>
                                        </div>
                                        
                                      </div>
                                      
                                    </div>
                                  </div>
                                  
                                </div>
                                
      
                                
                                <div class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] [--auto-close:inside] md:inline-block">
                                  
                                  <button id="hs-pro-shnnd1" type="button" class="hs-dropdown-toggle py-3 md:py-5 md:px-4 lg:px-5 w-full md:w-auto flex items-center text-sm text-start text-navbar-nav-foreground rounded-lg underline-offset-4 hover:underline disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:underline" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    Men
                                    <svg class="md:hidden hs-dropdown-open:-rotate-180 md:hs-dropdown-open:rotate-0 duration-300 ms-auto md:ms-2 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 opacity-0 w-full hidden z-10 top-full inset-s-0 min-w-60 md:bg-dropdown md:border-t md:border-dropdown-line md:rounded-b-xl md:shadow-xl before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shnnd1">
                                    <div class="max-w-340 w-full mx-auto py-2 md:py-4 lg:py-10 md:px-6 lg:px-8">
                                      
                                      <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-7 md:gap-5">
                                        <div class="space-y-7 md:space-y-10">
                                          <div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Featured</span>
                  
                                            <ul class="grid space-y-2">
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">New Arrivals</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Preline Essentials</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Wear to Work</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Logo Shop</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Summer Shop</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Preline x Mercedes F1 x CR</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Back to School</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Uniform Shop</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Adaptive</a></li>
                                            </ul>
                                          </div>
                                        </div>
                                        
              
                                        <div class="space-y-7 md:space-y-10">
                                          <div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Clothing</span>

<ul class="grid space-y-2">
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Shirts</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">T-shirts</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Polos</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Trousers</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Jeans</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Shorts</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Jackets</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Sweaters</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Blazers</a></li>
                                            </ul>
                                          </div>
                                        </div>
                                        
              
                                        <div class="space-y-7 md:space-y-10">
                                          <div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Shoes</span>

<ul class="grid space-y-2">
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Sneakers</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Nike Air Jordan</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Nike Air Force</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Soccer</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Lifestyle</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Slides & Sandals</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Trail Running</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Workout & Gym</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Basketball</a></li>
                                            </ul>
                                          </div>
                                        </div>
                                        
              
                                        <div class="space-y-7 md:space-y-10">
                                          <div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Accessories</span>

<div class="md:bg-muted">
                                      <div class="max-w-340 w-full mx-auto py-4 md:px-6 lg:px-8">
                                        
                                        <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-2 md:gap-5">
                                          <a class="p-1 md:-mx-1 flex items-center gap-x-3 rounded-lg hover:bg-muted-hover md:hover:bg-layer md:hover:shadow-2xs" href="#">
                                            <img class="shrink-0 size-10 object-cover rounded-md" src="https://images.unsplash.com/photo-1662411198835-c5a151d2af9e?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            <div class="grow">
                                              <p class="font-medium text-sm text-foreground">
                                                Shoes
                                              </p>
                                            </div>
                                          </a>

<a class="p-1 md:-mx-1 flex items-center gap-x-3 rounded-lg hover:bg-muted-hover md:hover:bg-layer md:hover:shadow-2xs" href="#">
                                            <img class="shrink-0 size-10 object-cover rounded-md" src="https://images.unsplash.com/photo-1721664744481-69df3af4fd66?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            <div class="grow">
                                              <p class="font-medium text-sm text-foreground">
                                                Accessories
                                              </p>
                                            </div>
                                          </a>
                                          
                
                                          <a class="p-1 md:-mx-1 flex items-center gap-x-3 rounded-lg hover:bg-muted-hover md:hover:bg-layer md:hover:shadow-2xs" href="#">
                                            <img class="shrink-0 size-10 object-cover rounded-md" src="https://images.unsplash.com/photo-1667411424779-f1da9251c39b?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            <div class="grow">
                                              <p class="font-medium text-sm text-foreground">
                                                Backpacks
                                              </p>
                                            </div>
                                          </a>
                                          
                
                                          <a class="p-1 md:-mx-1 flex items-center gap-x-3 rounded-lg hover:bg-muted-hover md:hover:bg-layer md:hover:shadow-2xs" href="#">
                                            <img class="shrink-0 size-10 object-cover rounded-md" src="https://images.unsplash.com/photo-1597843797221-e34b4a320b97?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            <div class="grow">
                                              <p class="font-medium text-sm text-foreground">
                                                Socks
                                              </p>
                                            </div>
                                          </a>
                                          
                                        </div>
                                        
                                      </div>
                                    </div>
                                  </div>
                                  
                                </div>

<div class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] [--auto-close:inside] md:inline-block">
                                  
                                  <button id="hs-pro-shnnd2" type="button" class="hs-dropdown-toggle py-3 md:py-5 md:px-4 lg:px-5 w-full md:w-auto flex items-center text-sm text-start text-navbar-nav-foreground rounded-lg underline-offset-4 hover:underline disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:underline" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    Women
                                    <svg class="md:hidden hs-dropdown-open:-rotate-180 md:hs-dropdown-open:rotate-0 duration-300 ms-auto md:ms-2 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

<div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Collections</span>
                  
                                            <ul class="grid space-y-2">
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Collections</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Zenvy</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Aster Pink Shop</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Lightweight Layers</a></li>
                                            </ul>
                                          </div>
                                        </div>
                                        
              
                                        <div class="space-y-7 md:space-y-10">
                                          <div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Clothing</span>

<ul class="grid space-y-2">
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Dresses</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Hoodies & Sweatshirts</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Shorts</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Pants</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Leggings</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Jackets & Vests</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Tops & T-Shirts</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Suits</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Skirts</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Matching Sets</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Plus Size</a></li>
                                            </ul>
                                          </div>
                                        </div>
                                        
              
                                        <div class="space-y-7 md:space-y-10">
                                          <div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Shoes</span>

<ul class="grid space-y-2">
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Lifestyle</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Retro Running</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Training & Gym</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Basketball</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Running</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Sandals & Slides</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Shoes $100 & Under</a></li>
                                            </ul>
                                          </div>
                                        </div>
                                        
              
                                        <div class="space-y-7 md:space-y-10">
                                          <div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Accessories</span>

<ul class="grid space-y-2">
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Clothing</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Shoes & Accessories</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Underwear</a></li>
                                              <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Adaptive Sale</a></li>
                                            </ul>
                                          </div>
                                        </div>
                                        
              
                                        <a class="hidden lg:block p-2 max-h-96 group relative rounded-xl bg-linear-to-br from-orange-100 via-purple-200 via-70% to-indigo-200 rounded-lg focus:outline-hidden dark:from-orange-500/50 dark:via-purple-500/50 dark:to-indigo-500/50" href="../../../templates/ecommerce/admin/index.html">
                                          <img class="shrink-0 size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Banner Image">
                                          <div class="absolute bottom-10 inset-x-0 inline-block text-center">
                                            <span class="py-1.5 px-2.5 bg-plain/30 text-sm text-foreground-inverse rounded-full backdrop-blur-md">
                                              Shop Women
                                            </span>
                                          </div>
                                        </a>
                                        
                                      </div>
                                      
                                    </div>

<div class="md:bg-muted">
                                      <div class="max-w-340 w-full mx-auto py-4 md:px-6 lg:px-8">
                                        
                                        <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-2 md:gap-5">
                                          <a class="p-1 md:-mx-1 flex items-center gap-x-3 rounded-lg hover:bg-muted-hover md:hover:bg-layer md:hover:shadow-2xs" href="#">
                                            <img class="shrink-0 size-10 object-cover rounded-md" src="https://images.unsplash.com/photo-1581101767113-1677fc2beaa8?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            <div class="grow">
                                              <p class="font-medium text-sm text-foreground">
                                                Shoes
                                              </p>
                                            </div>
                                          </a>

<a class="p-1 md:-mx-1 flex items-center gap-x-3 rounded-lg hover:bg-muted-hover md:hover:bg-layer md:hover:shadow-2xs" href="#">
                                            <img class="shrink-0 size-10 object-cover rounded-md" src="https://images.unsplash.com/photo-1592842124903-ed92a725cc4d?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            <div class="grow">
                                              <p class="font-medium text-sm text-foreground">
                                                Accessories
                                              </p>
                                            </div>
                                          </a>
                                          
                
                                          <a class="p-1 md:-mx-1 flex items-center gap-x-3 rounded-lg hover:bg-muted-hover md:hover:bg-layer md:hover:shadow-2xs" href="#">
                                            <img class="shrink-0 size-10 object-cover rounded-md" src="https://images.unsplash.com/photo-1504198458649-3128b932f49e?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            <div class="grow">
                                              <p class="font-medium text-sm text-foreground">
                                                T-shirts
                                              </p>
                                            </div>
                                          </a>
                                          
                
                                          <a class="p-1 md:-mx-1 flex items-center gap-x-3 rounded-lg hover:bg-muted-hover md:hover:bg-layer md:hover:shadow-2xs" href="#">
                                            <img class="shrink-0 size-10 object-cover rounded-md" src="https://images.unsplash.com/photo-1572307480813-ceb0e59d8325?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            <div class="grow">
                                              <p class="font-medium text-sm text-foreground">
                                                Hats
                                              </p>
                                            </div>
                                          </a>
                                          
                                        </div>
                                        
                                      </div>
                                    </div>
                                  </div>
                                  
                                </div>

<div class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] [--auto-close:inside] md:inline-block">
                                  
                                  <button id="hs-pro-shnnd3" type="button" class="hs-dropdown-toggle py-3 md:py-5 md:px-4 lg:px-5 w-full md:w-auto flex items-center text-sm text-start text-navbar-nav-foreground rounded-lg underline-offset-4 hover:underline disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:underline" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    Kids
                                    <svg class="md:hidden hs-dropdown-open:-rotate-180 md:hs-dropdown-open:rotate-0 duration-300 ms-auto md:ms-2 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

<div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Collections</span>

<div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">All Shoes</span>

<div>
                                            <span class="block mb-3 font-medium text-sm text-foreground">Accessories</span>

<div class="md:bg-muted">
                                      <div class="max-w-340 w-full mx-auto py-4 md:px-6 lg:px-8">
                                        
                                        <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-2 md:gap-5">
                                          <a class="p-1 md:-mx-1 flex items-center gap-x-3 rounded-lg hover:bg-muted-hover md:hover:bg-layer md:hover:shadow-2xs" href="#">
                                            <img class="shrink-0 size-10 object-cover rounded-md" src="https://images.unsplash.com/photo-1605382165091-443eff32caf5?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            <div class="grow">
                                              <p class="font-medium text-sm text-foreground">
                                                Shoes
                                              </p>
                                            </div>
                                          </a>

<a class="p-1 md:-mx-1 flex items-center gap-x-3 rounded-lg hover:bg-muted-hover md:hover:bg-layer md:hover:shadow-2xs" href="#">
                                            <img class="shrink-0 size-10 object-cover rounded-md" src="https://images.unsplash.com/photo-1721664744481-69df3af4fd66?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            <div class="grow">
                                              <p class="font-medium text-sm text-foreground">
                                                Accessories
                                              </p>
                                            </div>
                                          </a>
                                          
                
                                          <a class="p-1 md:-mx-1 flex items-center gap-x-3 rounded-lg hover:bg-muted-hover md:hover:bg-layer md:hover:shadow-2xs" href="#">
                                            <img class="shrink-0 size-10 object-cover rounded-md" src="https://images.unsplash.com/photo-1667411424779-f1da9251c39b?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            <div class="grow">
                                              <p class="font-medium text-sm text-foreground">
                                                Backpacks
                                              </p>
                                            </div>
                                          </a>
                                          
                
                                          <a class="p-1 md:-mx-1 flex items-center gap-x-3 rounded-lg hover:bg-muted-hover md:hover:bg-layer md:hover:shadow-2xs" href="#">
                                            <img class="shrink-0 size-10 object-cover rounded-md" src="https://images.unsplash.com/photo-1632337950445-ba446cb0e26f?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                            <div class="grow">
                                              <p class="font-medium text-sm text-foreground">
                                                Shorts
                                              </p>
                                            </div>
                                          </a>
                                          
                                        </div>
                                        
                                      </div>
                                    </div>
                                  </div>
                                  
                                </div>

<div class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] [--auto-close:inside] md:inline-block">
                                  
                                  <button id="hs-pro-shnnd4" type="button" class="hs-dropdown-toggle py-3 md:py-5 md:px-4 lg:px-5 w-full md:w-auto flex items-center text-sm text-start text-navbar-nav-foreground rounded-lg underline-offset-4 hover:underline disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:underline" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    Home
                                    <svg class="md:hidden hs-dropdown-open:-rotate-180 md:hs-dropdown-open:rotate-0 duration-300 ms-auto md:ms-2 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

<p class="mt-5 text-foreground">
                                          In collaboration with IKEA
                                        </p>
              
                                        <div class="mt-5">
                                          <a class="inline-block text-sm text-foreground underline underline-offset-4 decoration-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">
                                            Learn more
                                          </a>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  
                                </div>

<div class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] [--auto-close:inside] md:inline-block">
                                  
                                  <button id="hs-pro-shnnd5" type="button" class="hs-dropdown-toggle py-3 md:py-5 md:px-4 lg:px-5 w-full md:w-auto flex items-center text-sm text-start text-navbar-nav-foreground rounded-lg underline-offset-4 hover:underline disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:underline" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    Sales
                                    <svg class="md:hidden hs-dropdown-open:-rotate-180 md:hs-dropdown-open:rotate-0 duration-300 ms-auto md:ms-2 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 opacity-0 w-full hidden z-10 top-full inset-e-0 lg:inset-e-1/4 w-full md:w-120 md:bg-dropdown md:border-t md:border-dropdown-line md:rounded-b-xl md:shadow-xl before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shnnd5">
                                    
                                    <div class="py-4 md:p-6 grid grid-cols-1 md:grid-cols-2 gap-5">
                                      <div>
                                        <span class="block mb-3 font-medium text-sm text-foreground">Featured Sale</span>
              
                                        <ul class="mt-3 grid space-y-3">
                                          <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Buy 2, Get 15% off</a></li>
                                          <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Shoes $100 & Under</a></li>
                                        </ul>
                                      </div>

<div>
                                        <span class="block mb-3 font-medium text-sm text-foreground">Men</span>
              
                                        <ul class="mt-3 grid space-y-3">
                                          <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Shoes</a></li>
                                          <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Clothing</a></li>
                                          <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Accessories</a></li>
                                        </ul>
                                      </div>

<div>
                                        <span class="block mb-3 font-medium text-sm text-foreground">Women</span>
              
                                        <ul class="mt-3 grid space-y-3">
                                          <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Shoes</a></li>
                                          <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Clothing</a></li>
                                          <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Accessories</a></li>
                                        </ul>
                                      </div>

<div>
                                        <span class="block mb-3 font-medium text-sm text-foreground">Kids</span>
              
                                        <ul class="mt-3 grid space-y-3">
                                          <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Shoes</a></li>
                                          <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Clothing</a></li>
                                          <li><a class="text-sm text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">Accessories</a></li>
                                        </ul>
                                      </div>
                                      
                                    </div>
                                    
          
                                    
                                    <div class="hidden md:block px-3 pb-3">
                                      <a class="flex items-center gap-x-5 group relative overflow-hidden rounded-lg bg-linear-to-r from-orange-100 via-purple-200 via-70% to-indigo-200 rounded-lg focus:outline-hidden dark:from-orange-500/50 dark:via-purple-500/50 dark:to-indigo-500/50" href="../../../templates/ecommerce/admin/index.html">
                                        <div class="grow p-4">
                                          <p class="font-semibold text-lg uppercase text-orange-700 dark:text-foreground-inverse">
                                            50% off
                                          </p>
                                          <p class="font-medium text-foreground">
                                            Summer Sale
                                          </p>
                                          <p class="mt-2 flex items-center gap-x-1 text-sm text-primary">
                                            Shop now
                                            <svg class="shrink-0 size-4 group-hover:translate-x-0.5 transition" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path class="md:opacity-0 md:-translate-x-1 md:group-hover:opacity-100 md:group-hover:translate-x-0 md:group-focus:opacity-100 md:group-focus:translate-x-0 md:transition" d="M5 12h14"/><path class="md:-translate-x-1.5 md:group-hover:translate-x-0 md:group-focus:translate-x-0 md:transition" d="m12 5 7 7-7 7"/></svg>
                                          </p>
                                        </div>
                                        <div class="w-52 h-32">
                                          <div class="grid grid-cols-2 gap-2 -mt-10 -rotate-12">
                                            <div class="space-y-2">
                                              <div class="p-1.5 bg-layer rounded-lg shadow-md">
                                                <img class="size-24 object-cover rounded-md" src="https://images.unsplash.com/photo-1516762689617-e1cffcef479d?q=80&w=320&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                              </div>
                                              <div class="p-1.5 bg-layer rounded-lg shadow-md">
                                                <img class="size-24 object-cover rounded-md" src="https://images.unsplash.com/photo-1604176354204-9268737828e4?q=80&w=320&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                              </div>
                                            </div>

Open Storefront homepage

The navbar keeps the main links in one line while signed-out account actions stay on the edge.

<div class="">
                                          <button type="button" class="inline-flex items-center gap-x-1.5 text-[13px] text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-remove-element="#hs-pro-shfdi2">
                                            Remove
                                          </button>
                                        </div>
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                              <button id="hs-pro-shadnli" type="button" class="relative shrink-0 inline-flex justify-center items-center gap-x-2 size-9.5 rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                              </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-150 hs-dropdown-open:opacity-100 opacity-0 w-full sm:w-80 hidden z-10 bg-dropdown border-y sm:border-x border-dropdown-line sm:border-line-1 sm:mt-2 sm:rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shadnli">
                                <div class="p-1">
                                  
                                  <div class="p-5 bg-surface rounded-lg">
                                    <div class="mb-3 text-center">
                                      <span class="block font-medium text-foreground">
                                        Account
                                      </span>
                                    </div>

<p class="mt-3 text-center text-sm text-muted-foreground-1">
                                      Don't have an account?
                                      <a class="text-[13px] text-muted-foreground-1 underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/create-account.html">
                                        Register
                                      </a>
                                    </p>
                                  </div>

<div class="-mx-3 py-3 px-5">
                                    
                                    <div class="pb-1 mb-1 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                                      <a class="py-2 px-3 flex items-center gap-x-3 hover:bg-muted-hover rounded-md focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/my-orders.html">
                                        <div class="grow">
                                          <div class="flex gap-x-3">
                                            <svg class="shrink-0 size-4 mt-1 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>

<div class="grow">
                                              <span class="text-sm text-foreground">
                                                My orders
                                              </span>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="ms-auto">
                                          <svg class="shrink-0 size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </div>
                                      </a>
                                    </div>

<div class="pb-1 mb-1 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                                      <a class="py-2 px-3 flex items-center gap-x-3 hover:bg-muted-hover rounded-md focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/order-status.html">
                                        <div class="grow">
                                          <div class="flex gap-x-3">
                                            <svg class="shrink-0 size-4 mt-1 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8c0 3.613-3.869 7.429-5.393 8.795a1 1 0 0 1-1.214 0C9.87 15.429 6 11.613 6 8a6 6 0 0 1 12 0"/><circle cx="12" cy="8" r="2"/><path d="M8.714 14h-3.71a1 1 0 0 0-.948.683l-2.004 6A1 1 0 0 0 3 22h18a1 1 0 0 0 .948-1.316l-2-6a1 1 0 0 0-.949-.684h-3.712"/></svg>

<div class="grow">
                                              <span class="text-sm text-foreground">
                                                Order status
                                              </span>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="ms-auto">
                                          <svg class="shrink-0 size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </div>
                                      </a>
                                    </div>

<div class="pb-1 mb-1 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                                      <a class="py-2 px-3 flex items-center gap-x-3 hover:bg-muted-hover rounded-md focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/help.html">
                                        <div class="grow">
                                          <div class="flex gap-x-3">
                                            <svg class="shrink-0 size-4 mt-1 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>

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