Tailwind CSS Filter Panels Blocks

Filter Panels

Filter panels for transactions, product listings, and marketplace refinement with price ranges, toggles, and apply actions.

Filter card combines date fields, payment selectors, a price-range chart slider, and footer apply actions.

<div class="bg-card border border-card-line shadow-2xs rounded-xl">
                      
                      <div class="py-4 px-5 flex justify-between items-center border-b border-overlay-divider">
                        <h2  class="font-medium text-foreground">
                          Filters
                        </h2>
                      </div>

<div class="p-5 sm:py-10">
                        
                        <div class="py-8 first:pt-0 last:pb-0">
                          <label class="block mb-5 font-medium text-foreground">Price range</label>
  
                          
                          <div class="relative">
                            <div id="hs-pro-pytfrrch-bg"></div>
                            <div class="absolute top-0 inset-s-0 size-full overflow-hidden">
                              <div id="hs-pro-pytfrrch-fg"></div>
                            </div>
                          </div>

<div id="hs-pro-pytfrrch" class="mx-3 --prevent-on-load-init" data-hs-range-slider='{
                              "start": [0, 1000],
                              "range": {
                                "min": 0,
                                "max": 1000
                              },
                              "connect": true,
                              "formatter": "integer",
                              "cssClasses": {
                                "target": "relative h-1 rounded-full bg-surface",
                                "base": "size-full relative z-1",
                                "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                "handle": "absolute top-1/2 inset-e-0 z-2 size-7 bg-layer border border-layer-line rounded-full shadow-lg cursor-pointer translate-x-2/4 -translate-y-2/4",
                                "connects": "relative z-0 size-full rounded-full overflow-hidden",
                                "connect": "absolute top-0 inset-e-0 z-1 size-full bg-primary origin-top-left",
                                "touchArea": "absolute -top-1 -bottom-1 -inset-s-1 -inset-e-1"
                              }
                            }'>
                          </div>

<div class="mt-8 flex justify-between gap-3">
                            
                            <div class="text-center">
                              <label for="hs-pro-pytfrrch-vtit-min" class="block mb-1 text-sm text-muted-foreground-1">
                                Min
                              </label>
                              <input id="hs-pro-pytfrrch-vtit-min" type="number" class="py-2 sm:py-2.5 px-3 block w-16 text-center bg-layer border-layer-line rounded-xl sm:text-sm ring-1 ring-transparent text-foreground placeholder:text-muted-foreground-1 hover:border-primary-hover hover:ring-primary-hover focus:border-primary-hover focus:ring-primary-focus [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" value="250" style="-moz-appearance: textfield;">
                            </div>

<div class="text-center">
                              <label for="hs-pro-pytfrrch-vtit-max" class="block mb-1 text-sm text-muted-foreground-1">
                                Max
                              </label>
                              <input id="hs-pro-pytfrrch-vtit-max" type="number" class="py-2 sm:py-2.5 px-3 block w-16 text-center bg-layer border-layer-line rounded-xl sm:text-sm ring-1 ring-transparent text-foreground placeholder:text-muted-foreground-1 hover:border-primary-hover hover:ring-primary-hover focus:border-primary-hover focus:ring-primary-focus [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" value="750" style="-moz-appearance: textfield;">
                            </div>
                            
                          </div>

</div>

<div class="py-8 first:pt-0 last:pb-0">
                          <label class="block mb-2 font-medium text-foreground">
                            Date
                          </label>

<div class="grid grid-cols-2 gap-3">
                            
                            <div class="hs-dropdown [--auto-close:inside] w-full inline-flex">
                              <button id="hs-pro-pytfmsd" type="button" class="py-2.5 px-3 w-full inline-flex items-center rounded-xl text-sm bg-layer border border-layer-line text-layer-foreground ring-1 ring-transparent hover:border-primary-hover hover:ring-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:ring-primary-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                <svg class="shrink-0 me-2 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 width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
                                Start date
                                <svg class="shrink-0 ms-auto 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-79.5 transition-[opacity,margin] duration opacity-0 hidden z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-pytfmsd">
                                
                                    
                                    <div class="p-3 space-y-0.5">
                                      
                                      <div class="grid grid-cols-5 items-center gap-x-3 mx-1.5 pb-3">
                                        
                                        <div class="col-span-1">
                                          <button type="button" class="size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Previous">
                                            <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 18-6-6 6-6"/></svg>
                                          </button>
                                        </div>
                                        
          
                                        
                                        <div class="col-span-3 flex justify-center items-center gap-x-1">
                                          <div class="relative">
                                            <select data-hs-select='{
                                                "placeholder": "Select month",
                                                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                                                "dropdownClasses": "mt-2 z-50 w-32 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-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": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                                "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><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>"
                                              }' class="hidden">
                                              <option value="0">January</option>
                                              <option value="1">February</option>
                                              <option value="2">March</option>
                                              <option value="3">April</option>
                                              <option value="4">May</option>
                                              <option value="5">June</option>
                                              <option value="6" selected>July</option>
                                              <option value="7">August</option>
                                              <option value="8">September</option>
                                              <option value="9">October</option>
                                              <option value="10">November</option>
                                              <option value="11">December</option>
                                            </select>
                                          </div>

<div class="relative">
                                            <select data-hs-select='{
                                                "placeholder": "Select year",
                                                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                                                "dropdownClasses": "mt-2 z-50 w-20 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-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": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                                "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><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>"
                                              }' class="hidden">
                                              <option selected>2023</option>
                                              <option>2024</option>
                                              <option>2025</option>
                                              <option>2026</option>
                                              <option>2027</option>
                                            </select>
                                          </div>
                                        </div>

<div class="col-span-1 flex justify-end">
                                          <button type="button" class=" size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Next">
                                            <svg class="shrink-0 size-4" 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>
                                          </button>
                                        </div>
                                        
                                      </div>

<div class="flex pb-1.5">
                                        <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                          Mo
                                        </span>
                                        <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                          Tu
                                        </span>
                                        <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                          We
                                        </span>
                                        <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                          Th
                                        </span>
                                        <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                          Fr
                                        </span>
                                        <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                          Sa
                                        </span>
                                        <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                          Su
                                        </span>
                                      </div>

<div class="flex">
                                        <div >
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            10
                                          </button>
                                        </div>
                                        <div >
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            11
                                          </button>
                                        </div>
                                        <div >
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            12
                                          </button>
                                        </div>
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            13
                                          </button>
                                        </div>
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            14
                                          </button>
                                        </div>
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            15
                                          </button>
                                        </div>
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            16
                                          </button>
                                        </div>
                                      </div>
                                      
      
                                      
                                      <div class="flex">
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            17
                                          </button>
                                        </div>
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            18
                                          </button>
                                        </div>
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            19
                                          </button>
                                        </div>
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center bg-primary border-[1.5px] border-transparent text-sm font-medium text-primary-foreground hover:border-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                            20
                                          </button>
                                        </div>
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            21
                                          </button>
                                        </div>
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            22
                                          </button>
                                        </div>
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            23
                                          </button>
                                        </div>
                                      </div>
                                      
      
                                      
                                      <div class="flex">
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            24
                                          </button>
                                        </div>
                                        <div >
                                            <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            25
                                          </button>
                                        </div>
                                        <div >
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            26
                                          </button>
                                        </div>
                                        <div >
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            27
                                          </button>
                                        </div>
                                        <div >
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            28
                                          </button>
                                        </div>
                                        <div >
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            29
                                          </button>
                                        </div>
                                        <div >
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            30
                                          </button>
                                        </div>
                                      </div>
                                      
      
                                      
                                      <div class="flex">
                                        <div >
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                            31
                                          </button>
                                        </div>
                                        <div >
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                            1
                                          </button>
                                        </div>
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                            2
                                          </button>
                                        </div>
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                            3
                                          </button>
                                        </div>
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                            4
                                          </button>
                                        </div>
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                            5
                                          </button>
                                        </div>
                                        <div>
                                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                            6
                                          </button>
                                        </div>
                                      </div>
                                      
                                    </div>
                                
                              </div>
                            </div>

<div class="hs-dropdown [--auto-close:inside] w-full inline-flex">
                              <button id="hs-pro-pytfmed" type="button" class="py-2.5 px-3 w-full inline-flex items-center rounded-xl text-sm bg-layer border border-layer-line text-layer-foreground ring-1 ring-transparent hover:border-primary-hover hover:ring-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:ring-primary-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                <svg class="shrink-0 me-2 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 width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
                                End date
                                <svg class="shrink-0 ms-auto 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-79.5 transition-[opacity,margin] duration opacity-0 hidden z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-pytfmed">
                                
                                    
                                    <div class="p-3 space-y-0.5">
                                      
                                      <div class="grid grid-cols-5 items-center gap-x-3 mx-1.5 pb-3">
                                        
                                        <div class="col-span-1">
                                          <button type="button" class="size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Previous">
                                            <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 18-6-6 6-6"/></svg>
                                          </button>
                                        </div>
                                        
          
                                        
                                        <div class="col-span-3 flex justify-center items-center gap-x-1">
                                          <div class="relative">
                                            <select data-hs-select='{
                                                "placeholder": "Select month",
                                                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                                                "dropdownClasses": "mt-2 z-50 w-32 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-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": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                                "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><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>"
                                              }' class="hidden">
                                              <option value="0">January</option>
                                              <option value="1">February</option>
                                              <option value="2">March</option>
                                              <option value="3">April</option>
                                              <option value="4">May</option>
                                              <option value="5">June</option>
                                              <option value="6" selected>July</option>
                                              <option value="7">August</option>
                                              <option value="8">September</option>
                                              <option value="9">October</option>
                                              <option value="10">November</option>
                                              <option value="11">December</option>
                                            </select>
                                          </div>

<div class="mt-3 flex flex-wrap gap-2">
                            
                            <label for="hs-pro-pytfmdp-lm" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                            has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                            dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                            has-disabled:pointer-events-none
                            has-disabled:text-muted-foreground/30">
                              <input type="radio" id="hs-pro-pytfmdp-lm" class="hidden peer" name="hs-pro-pytfmdp" >
                              <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                                <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                              <span class="block">
                                Past 30 days
                              </span>
                            </label>

<label for="hs-pro-pytfmdp-lq" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                            has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                            dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                            has-disabled:pointer-events-none
                            has-disabled:text-muted-foreground/30">
                              <input type="radio" id="hs-pro-pytfmdp-lq" class="hidden peer" name="hs-pro-pytfmdp" >
                              <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                                <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                              <span class="block">
                                Past 3 months
                              </span>
                            </label>

<label for="hs-pro-pytfmdp-ly" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                            has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                            dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                            has-disabled:pointer-events-none
                            has-disabled:text-muted-foreground/30">
                              <input type="radio" id="hs-pro-pytfmdp-ly" class="hidden peer" name="hs-pro-pytfmdp" >
                              <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                                <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                              <span class="block">
                                2024
                              </span>
                            </label>
                            
                          </div>
                          
                        </div>

<div class="py-8 first:pt-0 last:pb-0">
                          <label class="block mb-2 font-medium text-foreground">
                            Balances
                          </label>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 sm:gap-3">
                            
                            <label for="hs-pro-pytfmusd" class="p-3 flex items-center gap-x-3 text-sm bg-layer border border-layer-line text-layer-foreground ring-1 ring-transparent cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover">
                              <img class="shrink-0 object-cover size-8 rounded-full" src="../../../assets/vendor/svg-country-flags/png250px/us.png" alt="Avatar">
                              <span class="grow">
                                <span class="block">
                                  USD
                                </span>
                              </span>

<label for="hs-pro-pytfmgb" class="p-3 flex items-center gap-x-3 text-sm bg-layer border border-layer-line text-layer-foreground ring-1 ring-transparent cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover">
                              <img class="shrink-0 object-cover size-8 rounded-full" src="../../../assets/vendor/svg-country-flags/png250px/gb.png" alt="Avatar">
                              <span class="grow">
                                <span class="block">
                                  GBP
                                </span>
                              </span>

<label for="hs-pro-pytfmeuro" class="p-3 flex items-center gap-x-3 text-sm bg-layer border border-layer-line text-layer-foreground ring-1 ring-transparent cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover">
                              <img class="shrink-0 object-cover size-8 rounded-full" src="../../../assets/vendor/svg-country-flags/png250px/eu.png" alt="Avatar">
                              <span class="grow">
                                <span class="block">
                                  EURO
                                </span>
                              </span>

<div class="py-8 first:pt-0 last:pb-0">
                          <label class="block mb-2 font-medium text-foreground">
                            Type
                          </label>

<div class="flex flex-wrap gap-2">
                            
                            <label for="hs-pro-pytfmty-1" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                            has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                            dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                            has-disabled:pointer-events-none
                            has-disabled:text-muted-foreground/30">
                              <input type="checkbox" id="hs-pro-pytfmty-1" class="hidden peer" name="hs-pro-pytfmty" >
                              <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                                <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                              <span class="block">
                                Transfers
                              </span>
                            </label>

<label for="hs-pro-pytfmty-2" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                            has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                            dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                            has-disabled:pointer-events-none
                            has-disabled:text-muted-foreground/30">
                              <input type="checkbox" id="hs-pro-pytfmty-2" class="hidden peer" name="hs-pro-pytfmty" >
                              <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                                <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                              <span class="block">
                                Cash withdrawal
                              </span>
                            </label>

<label for="hs-pro-pytfmty-3" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                            has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                            dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                            has-disabled:pointer-events-none
                            has-disabled:text-muted-foreground/30">
                              <input type="checkbox" id="hs-pro-pytfmty-3" class="hidden peer" name="hs-pro-pytfmty" >
                              <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                                <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                              <span class="block">
                                Card transactions
                              </span>
                            </label>

<label for="hs-pro-pytfmty-4" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                            has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                            dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                            has-disabled:pointer-events-none
                            has-disabled:text-muted-foreground/30">
                              <input type="checkbox" id="hs-pro-pytfmty-4" class="hidden peer" name="hs-pro-pytfmty" >
                              <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                                <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                              <span class="block">
                                Direct debits
                              </span>
                            </label>

<label for="hs-pro-pytfmty-5" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                            has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                            dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                            has-disabled:pointer-events-none
                            has-disabled:text-muted-foreground/30">
                              <input type="checkbox" id="hs-pro-pytfmty-5" class="hidden peer" name="hs-pro-pytfmty" >
                              <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                                <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                              <span class="block">
                                Batch transfers
                              </span>
                            </label>

<label for="hs-pro-pytfmty-6" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                            has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                            dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                            has-disabled:pointer-events-none
                            has-disabled:text-muted-foreground/30">
                              <input type="checkbox" id="hs-pro-pytfmty-6" class="hidden peer" name="hs-pro-pytfmty" >
                              <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                                <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                              <span class="block">
                                Money added
                              </span>
                            </label>

<label for="hs-pro-pytfmty-7" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                            has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                            dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                            has-disabled:pointer-events-none
                            has-disabled:text-muted-foreground/30">
                              <input type="checkbox" id="hs-pro-pytfmty-7" class="hidden peer" name="hs-pro-pytfmty" >
                              <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                                <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                              <span class="block">
                                Prefunding transfers
                              </span>
                            </label>

<label for="hs-pro-pytfmty-8" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                            has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                            dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                            has-disabled:pointer-events-none
                            has-disabled:text-muted-foreground/30">
                              <input type="checkbox" id="hs-pro-pytfmty-8" class="hidden peer" name="hs-pro-pytfmty" >
                              <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                                <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                              <span class="block">
                                Auto conversions
                              </span>
                            </label>

<label for="hs-pro-pytfmty-9" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                            has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                            dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                            has-disabled:pointer-events-none
                            has-disabled:text-muted-foreground/30">
                              <input type="checkbox" id="hs-pro-pytfmty-9" class="hidden peer" name="hs-pro-pytfmty" >
                              <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                                <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                              <span class="block">
                                Conversions
                              </span>
                            </label>

<label for="hs-pro-pytfmty-10" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                            has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                            dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                            has-disabled:pointer-events-none
                            has-disabled:text-muted-foreground/30">
                              <input type="checkbox" id="hs-pro-pytfmty-10" class="hidden peer" name="hs-pro-pytfmty" >
                              <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                                <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                              <span class="block">
                                Asset fees
                              </span>
                            </label>
                            
                          </div>
                          
                        </div>

<div class="py-8 first:pt-0 last:pb-0">
                          <label class="block mb-2 font-medium text-foreground">
                            Status
                          </label>

<div class="flex flex-wrap gap-2">
                            
                            <label for="hs-pro-pytfmst-completed" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                            has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                            dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                            has-disabled:pointer-events-none
                            has-disabled:text-muted-foreground/30">
                              <input type="checkbox" id="hs-pro-pytfmst-completed" class="hidden peer" name="hs-pro-pytfmst" >
                              <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                                <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                              <span class="block">
                                Completed
                              </span>
                            </label>

<label for="hs-pro-pytfmst-cancelled" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                            has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                            dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                            has-disabled:pointer-events-none
                            has-disabled:text-muted-foreground/30">
                              <input type="checkbox" id="hs-pro-pytfmst-cancelled" class="hidden peer" name="hs-pro-pytfmst" >
                              <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                                <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                              <span class="block">
                                Cancelled
                              </span>
                            </label>
                            
                          </div>
                          
                        </div>

<div class="py-8 first:pt-0 last:pb-0">
                          <label class="block mb-2 font-medium text-foreground">
                            Direction
                          </label>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 sm:gap-3">
                            
                            <label for="hs-pro-pytfmall" class="p-3 flex items-center gap-x-3 text-sm bg-layer border border-layer-line text-layer-foreground ring-1 ring-transparent cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover">
                              <span class="flex shrink-0 justify-center items-center size-8 bg-surface text-surface-foreground rounded-full">
                                <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="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/></svg>
                              </span>
                              <span class="grow">
                                <span class="block">
                                  All
                                </span>
                              </span>

<label for="hs-pro-pytfmmi" class="p-3 flex items-center gap-x-3 text-sm bg-layer border border-layer-line text-layer-foreground ring-1 ring-transparent cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover">
                              <span class="flex shrink-0 justify-center items-center size-8 bg-surface text-surface-foreground rounded-full">
                                <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="M17 7 7 17"/><path d="M17 17H7V7"/></svg>
                              </span>
                              <span class="grow">
                                <span class="block">
                                  Money in
                                </span>
                              </span>

<label for="hs-pro-pytfmmo" class="p-3 flex items-center gap-x-3 text-sm bg-layer border border-layer-line text-layer-foreground ring-1 ring-transparent cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover">
                              <span class="flex shrink-0 justify-center items-center size-8 bg-surface text-surface-foreground rounded-full">
                                <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 7h10v10"/><path d="M7 17 17 7"/></svg>
                              </span>
                              <span class="grow">
                                <span class="block">
                                  Money out
                                </span>
                              </span>

<div class="py-8 first:pt-0 last:pb-0">
                          <label class="block mb-2 font-medium text-foreground">
                            Currencies
                          </label>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div>
                              <label class="sr-only">
                                From
                              </label>
      
                              
                              <div class="relative inline-block w-full">
                                <select data-hs-select='{
                                    "placeholder": "From any currency",
                                    "hasSearch": true,
                                    "searchPlaceholder": "Type a currency",
                                    "searchClasses": "block py-1.5 sm:py-2 px-3 w-full sm:text-sm bg-transparent border-layer-line 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-2.5 ps-3 pe-9 flex items-center gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-xl text-start text-sm ring-1 ring-transparent hover:border-primary-hover hover:ring-primary-hover focus:outline-hidden focus:ring-primary-focus",
                                    "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=\"shrink-0 me-2\" data-icon></div><div class=\"grow\"><div class=\"flex justify-between items-center gap-x-3\"><div class=\"text-foreground\" data-title></div><div class=\"text-muted-foreground-1\" data-description></div></div></div></div></div>",
                                    "extraMarkup": "<div class=\"absolute top-1/2 inset-e-3 cursor-pointer -translate-y-1/2\"><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=\"m6 9 6 6 6-6\"/></svg></div>"
                                  }' class="hidden">
                                  <option value="">Choose</option>
                                  <option  value="USD" data-hs-select-option='{
                                    "description": "United States Dollar",
                                    "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/us.png\" alt=\"United States Dollar\" />"}'>
                                    USD
                                  </option>
                                  <option  value="GBP" data-hs-select-option='{
                                    "description": "British Pound",
                                    "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"British Pound\" />"}'>
                                    GBP
                                  </option>
                                  <option  value="EURO" data-hs-select-option='{
                                    "description": "EUR",
                                    "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eu.png\" alt=\"EUR\" />"}'>
                                    EURO
                                  </option>
                                </select>
                              </div>
                              
                            </div>

<div>
                              <label class="sr-only">
                                To
                              </label>
      
                              
                              <div class="relative inline-block w-full">
                                <select data-hs-select='{
                                    "placeholder": "To any currency",
                                    "hasSearch": true,
                                    "searchPlaceholder": "Type a currency",
                                    "searchClasses": "block py-1.5 sm:py-2 px-3 w-full sm:text-sm bg-transparent border-layer-line 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-2.5 ps-3 pe-9 flex items-center gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-xl text-start text-sm ring-1 ring-transparent hover:border-primary-hover hover:ring-primary-hover focus:outline-hidden focus:ring-primary-focus",
                                    "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=\"shrink-0 me-2\" data-icon></div><div class=\"grow\"><div class=\"flex justify-between items-center gap-x-3\"><div class=\"text-foreground\" data-title></div><div class=\"text-muted-foreground-1\" data-description></div></div></div></div></div>",
                                    "extraMarkup": "<div class=\"absolute top-1/2 inset-e-3 cursor-pointer -translate-y-1/2\"><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=\"m6 9 6 6 6-6\"/></svg></div>"
                                  }' class="hidden">
                                  <option value="">Choose</option>
                                  <option  value="USD" data-hs-select-option='{
                                    "description": "United States Dollar",
                                    "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/us.png\" alt=\"United States Dollar\" />"}'>
                                    USD
                                  </option>
                                  <option  value="GBP" data-hs-select-option='{
                                    "description": "British Pound",
                                    "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"British Pound\" />"}'>
                                    GBP
                                  </option>
                                  <option  value="EURO" data-hs-select-option='{
                                    "description": "EUR",
                                    "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eu.png\" alt=\"EUR\" />"}'>
                                    EURO
                                  </option>
                                </select>
                              </div>
                              
                            </div>
                          </div>
                          
                        </div>
                        
                      </div>

<div class="py-3 px-5 flex justify-between items-center gap-x-3 border-t border-overlay-footer">
                        <button type="button" class="py-2.5 px-3 inline-flex justify-center items-center gap-x-1.5 text-sm font-medium rounded-xl bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-pytfm">
                          Clear all
                        </button>
                        <button type="button" class="py-2.5 px-3 inline-flex justify-center items-center gap-x-1.5 text-sm font-medium rounded-xl 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-focus" data-hs-overlay="#hs-pro-pytfm">
                          Apply
                        </button>
                      </div>
                      
                    </div>

html.classList.toggle("dark", resolvedAppearance === "dark");
                        html.setAttribute("data-theme", `theme-${colorTheme}`);
                        if (brand) html.setAttribute("data-brand", brand);
                        if (font) html.setAttribute("data-font", font);
                      })();
                    </script>

if (!data.type) return false;
                        if (data.type === "hs:color-theme-change") {
                          window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                            detail: {
                              target: document.documentElement,
                              value: data.value
                            }
                          }));
                        }
                      });
                    </script>

foregroundParent.style.left = `${from}%`;
                            foregroundParent.style.width = `${width}%`;
                            foreground.style.width = `${foregroundParent.parentElement.clientWidth}px`;
                            foreground.style.marginLeft = `${-((foregroundParent.parentElement.clientWidth / 100) * from)}px`;
                          };

const range = document.querySelector('#hs-pro-pytfrrch');
                          const rangeInstance = new HSRangeSlider(range);
                          const min = document.querySelector('#hs-pro-pytfrrch-vtit-min');
                          const max = document.querySelector('#hs-pro-pytfrrch-vtit-max');
                          const background = document.querySelector('#hs-pro-pytfrrch-bg');
                          const foreground = document.querySelector('#hs-pro-pytfrrch-fg');
                          const foregroundParent = foreground.parentElement;

buildChart('#hs-pro-pytfrrch-bg', (mode) => ({
                            series: [{
                              name: 'Transactions',
                              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 18, 20, 35, 25, 25, 48, 40, 30, 30, 35, 45, 48, 48, 30, 40, 35, 25, 48, 48, 30, 40, 35, 25, 25, 8, 10, 15, 10]
                            }],
                            chart: {
                              height: 50,
                              type: 'bar',
                              sparkline: {
                                enabled: true
                              }
                            },
                            xaxis: {
                              type: 'category',
                              crosshairs: {
                                show: false
                              }
                            },
                            states: {
                              hover: {
                                filter: {
                                  type: 'none'
                                }
                              },
                              active: {
                                allowMultipleDataPointsSelection: false,
                                filter: {
                                  type: 'none'
                                }
                              }
                            },
                            tooltip: {
                              enabled: false
                            },
                          }), () => ({
                            colors: [varToColor('--chart-colors-chart-8')],
                            plotOptions: {
                              bar: {
                                colors: {
                                  ranges: [{
                                    from: -45,
                                    to: 0,
                                    color: varToColor('--chart-colors-chart-1')
                                  }]
                                }
                              }
                            },
                            grid: {
                              borderColor: varToColor('--chart-colors-grid-border')
                            }
                          }), () => ({
                            colors: [varToColor('--chart-colors-chart-8-inverse')],
                            plotOptions: {
                              bar: {
                                colors: {
                                  ranges: [{
                                    from: -45,
                                    to: 0,
                                    color: varToColor('--chart-colors-chart-1-inverse')
                                  }]
                                }
                              }
                            },
                            grid: {
                              borderColor: varToColor('--chart-colors-grid-border-inverse')
                            }
                          }));
                          buildChart('#hs-pro-pytfrrch-fg', (mode) => ({
                            series: [{
                              name: 'Transactions',
                              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 18, 20, 35, 25, 25, 48, 40, 30, 30, 35, 45, 48, 48, 30, 40, 35, 25, 48, 48, 30, 40, 35, 25, 25, 8, 10, 15, 10]
                            }],
                            chart: {
                              height: 50,
                              type: 'bar',
                              sparkline: {
                                enabled: true
                              }
                            },
                            xaxis: {
                              type: 'category',
                              crosshairs: {
                                show: false
                              }
                            },
                            states: {
                              hover: {
                                filter: {
                                  type: 'none'
                                }
                              },
                              active: {
                                allowMultipleDataPointsSelection: false,
                                filter: {
                                  type: 'none'
                                }
                              }
                            },
                            tooltip: {
                              enabled: false
                            },
                          }), () => ({
                            colors: [varToColor('--chart-colors-primary')],
                            plotOptions: {
                              bar: {
                                colors: {
                                  ranges: [{
                                    from: -45,
                                    to: 0,
                                    color: varToColor('--chart-colors-chart-1')
                                  }]
                                }
                              }
                            },
                            grid: {
                              borderColor: varToColor('--chart-colors-grid-border')
                            }
                          }), () => ({
                            colors: [varToColor('--chart-colors-primary-inverse')],
                            plotOptions: {
                              bar: {
                                colors: {
                                  ranges: [{
                                    from: -45,
                                    to: 0,
                                    color: varToColor('--chart-colors-chart-1-inverse')
                                  }]
                                }
                              }
                            },
                            grid: {
                              borderColor: varToColor('--chart-colors-grid-border-inverse')
                            }
                          }));

range.noUiSlider.on('update', (values) => {
                            min.value = rangeInstance.formattedValue[0];
                            max.value = rangeInstance.formattedValue[1];

updateForegroundChart(foregroundParent, foreground, values);
                          });

min.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([evt.target.value, max.value]), 200));
                          max.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([min.value, evt.target.value]), 200));

window.addEventListener("resize", () => updateForegroundChart(foregroundParent, foreground, range.noUiSlider.get()));

// Please add it for the popup to work correctly.
                          const popup = HSOverlay.getInstance('#hs-pro-pytfm', true);

if (popup) popup.element.on('open', () => updateForegroundChart(foregroundParent, foreground, range.noUiSlider.get()));
                        })();
                      });
                    </script>

Open related transactions template

Shop sidebar stacks category groups, checkboxes, a price slider, and bottom reset and apply actions.

<div id="hs-pro-shlfs" class="hs-overlay [--auto-close:lg]
                      hs-overlay-open:translate-x-0
                      -translate-x-full transition-all duration-300 transform
                      w-80 lg:w-72 h-full
                      hidden
                      fixed inset-y-0 inset-s-0 z-60
                      bg-sidebar border-e border-sidebar-line
                      lg:block lg:static lg:z-0 lg:translate-x-0" role="dialog" tabindex="-1" aria-label="Sidebar">
                      <div class="h-full flex-1 flex flex-col lg:h-auto">
                        
                        <div class="lg:hidden py-3 px-5 flex justify-between items-center gap-x-3 border-b border-sidebar-divider">
                          <div class="grow">
                            <span class="block font-medium text-foreground">
                              Filter
                            </span>
                          </div>

<button type="button" class="lg:hidden size-6 inline-flex justify-center items-center gap-x-2 rounded-full bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-shlfs" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-shlfs">
                            <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 class="h-full overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <div class="p-5 lg:pt-10 lg:ps-0">
                            
                            <div class="pb-6 mb-6 border-b border-sidebar-divider last:pb-0 last:mb-0 last:border-b-0">
                              <div class="mb-3">
                                <span class="font-medium text-sm text-foreground">Applied filters</span>
                              </div>
          
                              
                              <span id="hs-pro-shfdaf1" class="hs-removing:opacity-0 transition duration-300 p-1 ps-2 inline-flex items-center gap-1.5 bg-surface text-surface-foreground text-sm rounded-md">
                                Women
                                <button type="button" class="inline-flex shrink-0 justify-center items-center size-5 rounded-md text-muted-foreground-2 hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm" data-hs-remove-element="#hs-pro-shfdaf1">
                                  <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><path d="m6 6 12 12"></path></svg>
                                </button>
                              </span>

<span id="hs-pro-shfdaf2" class="hs-removing:opacity-0 transition duration-300 p-1 ps-2 inline-flex items-center gap-1.5 bg-surface text-surface-foreground text-sm rounded-md">
                                Clothing
                                <button type="button" class="inline-flex shrink-0 justify-center items-center size-5 rounded-md text-muted-foreground-2 hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm" data-hs-remove-element="#hs-pro-shfdaf2">
                                  <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><path d="m6 6 12 12"></path></svg>
                                </button>
                              </span>
                              
                            </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-tshirts" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-tshirts">
                                    <span class="ms-2 text-foreground">T-shirts</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(89)</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-polos" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-polos">
                                    <span class="ms-2 text-foreground">Polos</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(35)</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-trousers" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-trousers">
                                    <span class="ms-2 text-foreground">Trousers</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(30)</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-jeans" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-jeans">
                                    <span class="ms-2 text-foreground">Jeans</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(21)</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-shorts" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-shorts">
                                    <span class="ms-2 text-foreground">Shorts</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(5)</span>
                                  </label>
                                </div>
                                
  
                                
                                <div class="flex items-center">
                                  <label for="hs-pro-shfloc-jackets" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-jackets">
                                    <span class="ms-2 text-foreground">Jackets</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(15)</span>
                                  </label>
                                </div>
                                
                              </div>

<div id="hs-pro-shfcc-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-pro-shfcc" role="region">
                                <div class="space-y-0.5">
                                  
                                  <div class="flex items-center">
                                    <label for="hs-pro-shfloc-sweaters" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-sweaters">
                                      <span class="ms-2 text-foreground">Sweaters</span>
                                      <span class="ms-auto text-xs text-muted-foreground-1">(44)</span>
                                    </label>
                                  </div>

<div class="flex items-center">
                                    <label for="hs-pro-shfloc-blazers" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-blazers">
                                      <span class="ms-2 text-foreground">Blazers</span>
                                      <span class="ms-auto text-xs text-muted-foreground-1">(1)</span>
                                    </label>
                                  </div>
                                  
                                </div>
                              </div>

<div class="pb-6 mb-6 border-b border-sidebar-divider last:pb-0 last:mb-0 last:border-b-0">
                              <div class="mb-3">
                                <span class="font-medium text-sm text-foreground">Size</span>
                              </div>
          
                              
                              <div class="mx-px grid grid-cols-3 gap-2">
                                
                                <label for="hs-pro-shfdsrOneSize" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsrOneSize" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    One size
                                  </span>
                                </label>

<label for="hs-pro-shfdsr2XS" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr2XS" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    2XS
                                  </span>
                                </label>

<label for="hs-pro-shfdsrXS" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsrXS" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    XS
                                  </span>
                                </label>

<label for="hs-pro-shfdsrS" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsrS" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    S
                                  </span>
                                </label>

<label for="hs-pro-shfdsrM" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsrM" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    M
                                  </span>
                                </label>

<label for="hs-pro-shfdsrL" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsrL" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    L
                                  </span>
                                </label>

<label for="hs-pro-shfdsrXL" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsrXL" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    XL
                                  </span>
                                </label>

<label for="hs-pro-shfdsr2XL" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr2XL" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    2XL
                                  </span>
                                </label>

<label for="hs-pro-shfdsr3XL" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr3XL" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    3XL
                                  </span>
                                </label>

<label for="hs-pro-shfdsr4XL" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr4XL" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    4XL
                                  </span>
                                </label>

<label for="hs-pro-shfdsr36" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr36" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    36
                                  </span>
                                </label>

<label for="hs-pro-shfdsr38" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr38" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    38
                                  </span>
                                </label>

<label for="hs-pro-shfdsr39" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr39" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    39
                                  </span>
                                </label>

<label for="hs-pro-shfdsr40" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr40" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    40
                                  </span>
                                </label>

<label for="hs-pro-shfdsr41" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr41" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    41
                                  </span>
                                </label>

<label for="hs-pro-shfdsr42" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr42" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    42
                                  </span>
                                </label>

<label for="hs-pro-shfdsr43" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr43" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    43
                                  </span>
                                </label>

<label for="hs-pro-shfdsr44" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr44" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    44
                                  </span>
                                </label>

<label for="hs-pro-shfdsr45" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr45" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    45
                                  </span>
                                </label>

<label for="hs-pro-shfdsr46" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr46" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    46
                                  </span>
                                </label>

<label for="hs-pro-shfdsr48" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr48" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    48
                                  </span>
                                </label>

<label for="hs-pro-shfdsr50" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr50" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    50
                                  </span>
                                </label>

<label for="hs-pro-shfdsr52" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr52" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    52
                                  </span>
                                </label>

<label for="hs-pro-shfdsr54" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr54" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    54
                                  </span>
                                </label>

<label for="hs-pro-shfdsr56" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr56" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    56
                                  </span>
                                </label>

<label for="hs-pro-shfdsr58" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr58" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    58
                                  </span>
                                </label>

<label for="hs-pro-shfdsr60" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shfdsr60" class="hidden" name="hs-pro-shfdsr" >
                                  <span class="block">
                                    60
                                  </span>
                                </label>
                                
                              </div>
                              
                            </div>

<div class="pb-6 mb-6 border-b border-sidebar-divider last:pb-0 last:mb-0 last:border-b-0">
                              <div class="mb-3">
                                <span class="font-medium text-sm text-foreground">Color</span>
                              </div>
          
                              
                              <div class="space-y-0.5">
                                
                                <label for="hs-pro-shflocss-black" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-inverse border-black rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-black disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shflocss-black">
                                  <span class="ms-2 text-foreground">Black</span>
                                  <span class="ms-auto text-xs text-muted-foreground-1">(70)</span>
                                </label>

<label for="hs-pro-shfloc-white" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-plain border-line-3 rounded-sm focus:ring-0 focus:ring-offset-0 focus:checked:border-line-3 checked:text-foreground-inverse checked:border-line-3 checked:bg-none disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-white">
                                  <svg class="shrink-0 size-4 -ms-5 opacity-0 group-has-checked:opacity-100 fill-black" viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>
                                  <span class="ms-2 text-foreground">White</span>
                                  <span class="ms-auto text-xs text-muted-foreground-1">(127)</span>
                                </label>

<label for="hs-pro-shfloc-gray" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-surface-2 border-line-3 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-line-3 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-gray">
                                  <span class="ms-2 text-foreground">Gray</span>
                                  <span class="ms-auto text-xs text-muted-foreground-1">(63)</span>
                                </label>

<label for="hs-pro-shfloc-red" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-red-500 border-red-500 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-red-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-red">
                                  <span class="ms-2 text-foreground">Red</span>
                                  <span class="ms-auto text-xs text-muted-foreground-1">(32)</span>
                                </label>

<label for="hs-pro-shfloc-orange" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-orange-500 border-orange-500 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-orange-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-orange">
                                  <span class="ms-2 text-foreground">Orange</span>
                                  <span class="ms-auto text-xs text-muted-foreground-1">(25)</span>
                                </label>

<label for="hs-pro-shfloc-yellow" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-yellow-500 border-yellow-500 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-yellow-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-yellow">
                                  <span class="ms-2 text-foreground">Yellow</span>
                                  <span class="ms-auto text-xs text-muted-foreground-1">(15)</span>
                                </label>

<label for="hs-pro-shfloc-green" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-green-500 border-green-500 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-green-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-green">
                                  <span class="ms-2 text-foreground">Green</span>
                                  <span class="ms-auto text-xs text-muted-foreground-1">(12)</span>
                                </label>

<label for="hs-pro-shfloc-blue" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-blue-500 border-blue-500 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-blue-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-blue">
                                  <span class="ms-2 text-foreground">Blue</span>
                                  <span class="ms-auto text-xs text-muted-foreground-1">(86)</span>
                                </label>
                                
                              </div>

</div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-25-50" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-25-50">
                                    <span class="ms-2 text-foreground">$25-$50</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(92)</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-50-100" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-50-100">
                                    <span class="ms-2 text-foreground">$50-$100</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(135)</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-100-150" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-100-150">
                                    <span class="ms-2 text-foreground">$100-$150</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(27)</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-150-plus" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-150-plus">
                                    <span class="ms-2 text-foreground">$150+</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(3)</span>
                                  </label>
                                </div>
                                
                              </div>

<div class="mx-3 mt-5">
                                <div class="flex justify-center w-full mb-5">
                                  <div class="flex items-center text-sm text-foreground">
                                    <div id="hs-pass-values-to-html-elements-min-target" class="text-center min-w-12">250</div>
                                    -
                                    <div id="hs-pass-values-to-html-elements-max-target" class="text-center min-w-12">750</div>
                                  </div>
                                </div>
                                <label class="sr-only">Example range</label>
                                <div id="hs-pass-values-to-html-elements" class="--prevent-on-load-init" data-hs-range-slider='{
                                  "start": [250, 750],
                                  "range": {
                                    "min": 0,
                                    "max": 1000
                                  },
                                  "formatter": {
                                    "type": "integer",
                                    "prefix": "$"
                                  },
                                  "connect": true,
                                  "cssClasses": {
                                    "target": "relative h-1 rounded-full bg-surface",
                                    "base": "size-full relative z-1",
                                    "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                    "handle": "absolute top-1/2 inset-e-0 size-5 bg-layer border-3 border-line-8 rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                    "connects": "relative z-0 size-full rounded-full overflow-hidden",
                                    "connect": "absolute top-0 inset-e-0 z-1 size-full bg-secondary origin-top-left ",
                                    "touchArea": "absolute -top-1 -bottom-1 -inset-s-1 -inset-e-1"
                                  }
                                }'></div>
                              </div>
                              
                            </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-modern" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-modern">
                                    <span class="ms-2 text-foreground">Modern</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(1)</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-regular" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-regular">
                                    <span class="ms-2 text-foreground">Regular</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(135)</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-relaxed" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-relaxed">
                                    <span class="ms-2 text-foreground">Relaxed</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(26)</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-skinny" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-skinny">
                                    <span class="ms-2 text-foreground">Skinny</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(3)</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-slim" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-slim">
                                    <span class="ms-2 text-foreground">Slim</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(30)</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-straight" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-straight">
                                    <span class="ms-2 text-foreground">Straight</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(9)</span>
                                  </label>
                                </div>
                                
                              </div>
                              
                            </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-short-sleeve" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-short-sleeve">
                                    <span class="ms-2 text-foreground">Short Sleeve</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(78)</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shfloc-sleeveless" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-sleeveless">
                                    <span class="ms-2 text-foreground">Sleeveless</span>
                                    <span class="ms-auto text-xs text-muted-foreground-1">(2)</span>
                                  </label>
                                </div>
                                
                              </div>
                              
                            </div>
                            
                          </div>
                        </div>

<div class="py-4 px-5 lg:py-6 lg:ps-0 flex items-center gap-x-2 border-t border-sidebar-divider">
                          <button type="button" class="py-2 px-3 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-shflo">
                            <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>
                            Clear filters
                          </button>

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

Marketplace sidebar groups accordion filters, checkbox lists, price controls, and fixed bottom apply actions.

<div id="hs-pro-shmlfs" class="hs-overlay [--auto-close:lg]
                      hs-overlay-open:translate-x-0
                      -translate-x-full transition-all duration-300 transform
                      w-80 lg:w-72 h-full
                      hidden
                      fixed inset-y-0 inset-s-0 z-60
                      bg-sidebar border-e border-sidebar-line
                      lg:block lg:static lg:z-0 lg:translate-x-0" role="dialog" tabindex="-1" aria-label="Sidebar">
                      <div class="h-full flex-1 flex flex-col lg:h-auto">
                        
                        <div class="lg:hidden py-3 px-5 flex justify-between items-center gap-x-3 border-b border-sidebar-header">
                          <div class="grow">
                            <span class="block font-medium text-foreground">
                              Filter
                            </span>
                          </div>

<button type="button" class="lg:hidden size-6 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-shmlfs" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-shmlfs">
                            <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 class="h-full overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <div class="p-5 lg:pt-10 lg:ps-0">
                            
                            <div class="pb-6 mb-6 border-b border-sidebar-divider last:pb-0 last:mb-0 last:border-b-0">
                              <div class="mb-3">
                                <span class="font-medium text-sm text-foreground">Category</span>
                              </div>
            
                              
                              <div class="space-y-0.5">
                                
                                <div class="flex items-center">
                                  <label for="hs-pro-shmfloc1" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc1">
                                    <span class="ms-2 text-foreground">Phones and smart watches</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shmfloc2" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc2">
                                    <span class="ms-2 text-foreground">Laptops, tablets and e-books</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shmfloc3" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc3">
                                    <span class="ms-2 text-foreground">Optical devices</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shmfloc4" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc4">
                                    <span class="ms-2 text-foreground">Headphones and audio equipment</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shmfloc5" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc5">
                                    <span class="ms-2 text-foreground">Computers & Peripherals</span>
                                  </label>
                                </div>
                                
  
                                
                                <div class="flex items-center">
                                  <label for="hs-pro-shmfloc6" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc6">
                                    <span class="ms-2 text-foreground">Photo and video cameras</span>
                                  </label>
                                </div>
                                
                              </div>

<div id="hs-pro-shfcc-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-pro-shfcc" role="region">
                                <div class="space-y-0.5">
                                  
                                  <div class="flex items-center">
                                    <label for="hs-pro-shmfloc7" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                      <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc7">
                                      <span class="ms-2 text-foreground">Game consoles and laptops</span>
                                    </label>
                                  </div>

<div class="flex items-center">
                                    <label for="hs-pro-shmfloc8" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                      <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc8">
                                      <span class="ms-2 text-foreground">Office equipment</span>
                                    </label>
                                  </div>

<div class="flex items-center">
                                    <label for="hs-pro-shmfloc-9" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                      <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc-9">
                                      <span class="ms-2 text-foreground">Smart Home</span>
                                    </label>
                                  </div>

<div class="flex items-center">
                                    <label for="hs-pro-shmfloc10" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                      <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc10">
                                      <span class="ms-2 text-foreground">Televisions and video equipment</span>
                                    </label>
                                  </div>
                                  
                                </div>
                              </div>

<div class="pb-6 mb-6 border-b border-sidebar-divider last:pb-0 last:mb-0 last:border-b-0">
                              
                              <div class="flex flex-wrap justify-between items-center gap-2">
                                <label for="hs-pro-sale" class="flex-1 cursor-pointer font-medium text-sm text-foreground">Sale</label>
                                <label for="hs-pro-sale" class="relative inline-block w-11 h-6 cursor-pointer">
                                  <input type="checkbox" id="hs-pro-sale" class="peer sr-only" checked>
                                  <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                  <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                </label>
                              </div>
                              
                            </div>

<div class="pb-6 mb-6 border-b border-sidebar-divider last:pb-0 last:mb-0 last:border-b-0">
                              <div class="mb-3">
                                <span class="font-medium text-sm text-foreground">Brand</span>
                              </div>
            
                              
                              <div class="relative mb-1">
                                <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none z-20 ps-2.5">
                                  <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"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                                </div>
                                <input type="text" class="py-1.5 sm:py-2 ps-8 pe-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-muted-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:border-line-3 focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="Search brands" data-hs-overlay="#hs-pro-dnsm">
                                <div class="hidden absolute inset-y-0 inset-e-0 flex items-center z-20 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 class="space-y-0.5">
                                
                                <div class="flex items-center">
                                  <label for="hs-pro-shmflobr1" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmflobr1">
                                    <span class="ms-2 text-foreground">Apple</span>
                                    <svg class="ms-auto shrink-0 size-4 text-foreground" width="32" height="38" viewBox="0 0 32 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M15.7793 8.96916C17.8267 8.96916 19.6228 8.16967 21.1675 6.57065C22.7122 4.97162 23.4847 3.11224 23.4847 0.992498C23.4847 0.75969 23.4662 0.428857 23.4295 0C23.1598 0.0367592 22.9575 0.0673918 22.8226 0.091898C20.9346 0.361465 19.2734 1.28657 17.8389 2.86718C16.4045 4.44782 15.6873 6.13874 15.6873 7.93994C15.6873 8.14821 15.718 8.49133 15.7793 8.96916ZM23.1168 37.0714C24.5758 37.0714 26.1879 36.0728 27.9534 34.0755C29.7189 32.0783 31.0674 29.7318 31.9992 27.0362C28.5296 25.2472 26.7948 22.6803 26.7948 19.3352C26.7948 16.5415 28.1986 14.1522 31.0061 12.1672C29.0568 9.72885 26.4822 8.50967 23.2824 8.50967C21.9337 8.50967 20.7017 8.71185 19.586 9.1162L18.8872 9.37351L17.9493 9.74111C17.3363 9.97391 16.7785 10.0904 16.2758 10.0904C15.8835 10.0904 15.3685 9.95553 14.7311 9.68597L14.0138 9.39189L13.3334 9.1162C12.3403 8.6996 11.2737 8.49129 10.1336 8.49129C7.08085 8.49129 4.62888 9.52055 2.77761 11.5791C0.926346 13.6375 0.000732422 16.3516 0.000732422 19.7211C0.000732422 24.463 1.48417 28.8435 4.45109 32.8625C6.51078 35.6684 8.39267 37.0714 10.0968 37.0714C10.8201 37.0714 11.5373 36.9305 12.2484 36.6486L13.1495 36.281L13.8667 36.0237C14.872 35.6684 15.7977 35.4907 16.6436 35.4907C17.5386 35.4907 18.5684 35.7174 19.7331 36.1708L20.3032 36.3913C21.4924 36.8447 22.4303 37.0714 23.1168 37.0714Z" fill="currentColor"/>
                                    </svg>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shmflobr2" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmflobr2">
                                    <span class="ms-2 text-foreground">Xiaomi</span>
                                    <svg class="ms-auto shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M13.1934 0.153694C9.24918 0.334425 6.86778 0.951036 4.83722 2.31183C3.39137 3.26864 2.32825 4.5125 1.5628 6.14971C0.72293 7.94639 0.350838 9.92379 0.191369 13.6022C6.95139e-06 17.7165 0.276419 21.8201 0.89303 23.9995C1.44585 25.977 2.32825 27.4866 3.67841 28.7517C5.34751 30.3039 7.21861 31.1225 10.1209 31.5583C12.7787 31.9517 18.9342 31.973 21.6239 31.6009C24.8983 31.1544 26.9821 30.2294 28.6937 28.454C29.5442 27.5823 29.9375 27.0082 30.4904 25.8494C31.3515 24.0314 31.7023 22.1497 31.8724 18.3863C32 15.6966 31.8724 11.8693 31.6066 10.0833C30.9794 5.89456 29.1934 3.17296 26.0784 1.59954C24.4306 0.780937 22.0067 0.302531 18.6366 0.143063C16.0957 0.0261192 15.7555 0.0261192 13.1934 0.153694ZM17.1163 10.062C18.5196 10.3916 19.2 10.8593 19.6465 11.8162C20.1037 12.7942 20.1781 13.6022 20.1781 18.0142V22.1603L17.1482 22.0966L17.095 18.0567C17.0419 13.6447 17.0206 13.5065 16.404 13.0281C15.8512 12.5922 15.3834 12.5391 12.3641 12.5284H9.49369L9.38738 22.0966H6.41064L6.37874 16.0474C6.35748 11.274 6.38938 9.96632 6.48506 9.90253C6.55948 9.84938 8.82393 9.82811 11.5136 9.84938C15.4578 9.8919 16.5422 9.93443 17.1163 10.062ZM25.4724 9.99821C25.5469 10.147 25.5787 21.7032 25.5043 22.0753C25.5043 22.1178 24.8133 22.1391 23.9841 22.1284L22.4638 22.0966L22.4319 16.1005C22.4213 11.763 22.4425 10.062 22.5276 9.96632C22.6233 9.84938 22.9954 9.81748 24.016 9.81748C25.2067 9.81748 25.3874 9.83874 25.4724 9.99821ZM14.8625 22.1603L11.7263 22.0966L11.6944 18.4819C11.6837 16.4939 11.6944 14.8035 11.7263 14.7397C11.7581 14.6334 12.1728 14.6015 13.3209 14.6015H14.8625V22.1603Z" fill="#FF6600"/>
                                    </svg>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shmflobr3" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmflobr3">
                                    <span class="ms-2 text-foreground">Samsung</span>
                                    <svg class="ms-auto shrink-0 w-auto h-2 text-foreground" width="209" height="33" viewBox="0 0 209 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M0.666626 24.135V21.855H8.65463V24.755C8.64844 25.136 8.72394 25.5139 8.87605 25.8633C9.02816 26.2127 9.25335 26.5254 9.53645 26.7805C9.81956 27.0356 10.154 27.227 10.5173 27.342C10.8806 27.4569 11.2643 27.4928 11.6426 27.447C12.2889 27.5347 12.9445 27.3763 13.4794 27.0032C14.0143 26.6302 14.3896 26.0697 14.5306 25.433C14.7445 24.7036 14.7263 23.9257 14.4786 23.207C12.9326 19.319 2.36863 17.559 1.02663 11.499C0.753408 10.1678 0.736437 8.79662 0.976625 7.45901C1.80063 2.59301 6.07663 0.833008 11.3846 0.833008C15.6106 0.833008 21.4346 1.81701 21.4346 8.34101V10.465H14.0146V8.60101C14.037 8.2336 13.9796 7.8657 13.8464 7.52259C13.7131 7.17947 13.5071 6.86928 13.2426 6.61331C12.9781 6.35734 12.6613 6.16168 12.314 6.03976C11.9667 5.91784 11.5971 5.87255 11.2306 5.90701C10.6048 5.8381 9.97609 6.00784 9.46999 6.38231C8.9639 6.75679 8.61772 7.30842 8.50063 7.92701C8.41722 8.44349 8.43489 8.97125 8.55263 9.48101C9.42663 12.949 20.7146 14.815 21.9526 21.081C22.262 22.705 22.279 24.3711 22.0026 26.001C21.2806 30.969 16.8486 32.833 11.4906 32.833C5.86663 32.833 0.666626 30.813 0.666626 24.135ZM97.4506 24.033V21.753H105.337V24.601C105.324 24.9786 105.394 25.3544 105.54 25.7027C105.686 26.0511 105.906 26.3637 106.184 26.6193C106.462 26.8749 106.792 27.0675 107.152 27.1837C107.511 27.3 107.891 27.3373 108.267 27.293C108.907 27.3885 109.56 27.2389 110.095 26.8741C110.63 26.5093 111.008 25.9561 111.153 25.325C111.366 24.6126 111.349 23.8508 111.103 23.149C109.607 19.319 99.1446 17.549 97.8066 11.499C97.5329 10.1854 97.5153 8.83131 97.7546 7.51101C98.5846 2.69701 102.867 0.937008 108.067 0.937008C112.243 0.937008 118.013 1.97301 118.013 8.39301V10.465H110.645V8.65301C110.668 8.29012 110.613 7.92643 110.484 7.5866C110.354 7.24677 110.153 6.93874 109.895 6.68342C109.636 6.42809 109.325 6.23144 108.983 6.10679C108.642 5.98215 108.277 5.93243 107.915 5.96101C107.3 5.87954 106.678 6.0389 106.179 6.40573C105.679 6.77256 105.341 7.31841 105.235 7.92901C105.15 8.44535 105.167 8.97315 105.285 9.48301C106.109 12.951 117.285 14.765 118.531 20.977C118.84 22.5835 118.857 24.2325 118.581 25.845C117.859 30.817 113.479 32.629 108.181 32.629C102.607 32.633 97.4506 30.607 97.4506 24.033ZM125.693 25.123C125.621 24.4689 125.604 23.8099 125.643 23.153V1.71301H133.167V23.823C133.157 24.2037 133.174 24.5846 133.217 24.963C133.385 25.5865 133.753 26.1372 134.266 26.53C134.778 26.9227 135.406 27.1355 136.052 27.1355C136.697 27.1355 137.325 26.9227 137.837 26.53C138.35 26.1372 138.719 25.5865 138.887 24.963C138.931 24.5847 138.949 24.2038 138.939 23.823V1.71301H146.467V23.149C146.467 23.719 146.415 24.807 146.415 25.119C145.901 30.719 141.519 32.519 136.057 32.519C130.595 32.519 126.209 30.709 125.693 25.119V25.123ZM187.641 24.811C187.564 24.1545 187.529 23.4939 187.537 22.833V10.257C187.537 9.73901 187.587 8.80701 187.639 8.28701C188.309 2.69701 192.793 0.937008 198.101 0.937008C203.359 0.937008 207.995 2.69701 208.513 8.28901C208.574 8.94376 208.591 9.60197 208.563 10.259V11.233H201.039V9.58501C201.04 9.20268 201.006 8.82105 200.937 8.44501C200.739 7.8137 200.345 7.26202 199.812 6.87033C199.278 6.47864 198.634 6.26742 197.973 6.26742C197.311 6.26742 196.667 6.47864 196.134 6.87033C195.601 7.26202 195.206 7.8137 195.009 8.44501C194.922 8.90628 194.887 9.37598 194.907 9.84501V23.513C194.898 23.8937 194.915 24.2746 194.959 24.653C195.137 25.331 195.551 25.923 196.127 26.3226C196.703 26.7223 197.403 26.9032 198.101 26.833C198.786 26.9059 199.474 26.7249 200.034 26.3241C200.594 25.9234 200.988 25.3309 201.141 24.659C201.21 24.2832 201.227 23.8996 201.193 23.519V19.163H198.153V14.813H208.667V22.833C208.674 23.4906 208.639 24.1479 208.563 24.801C208.049 30.237 203.363 32.153 198.101 32.153C192.839 32.153 188.155 30.243 187.641 24.807V24.811ZM82.7646 31.589L82.5646 3.93901L77.4046 31.589H69.8806L64.7766 3.93901L64.5766 31.589H57.1506L57.7686 1.76501H69.8806L73.6426 25.067L77.4046 1.76501H89.5146L90.1846 31.589H82.7646ZM43.1846 31.589L39.1646 3.93901L35.0406 31.589H27.0026L32.4666 1.76501H45.7126L51.1766 31.589H43.1846ZM169.139 31.279L161.667 6.47701L162.079 31.277H154.759V1.76501H165.787L172.787 25.791L172.385 1.76501H179.755V31.281L169.139 31.279Z" fill="currentColor"/>
                                    </svg>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shmflobr5" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmflobr5">
                                    <span class="ms-2 text-foreground">Honor</span>
                                    <svg class="ms-auto shrink-0 w-auto h-2 text-foreground" width="169" height="32" viewBox="0 0 169 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path fill-rule="evenodd" clip-rule="evenodd" d="M48.0613 0.0166016C56.8885 0.0166016 64.0445 7.17256 64.0445 15.9999C64.0445 24.8272 56.8885 31.9831 48.0613 31.9831C39.234 31.9831 32.078 24.8272 32.078 15.9999C32.078 7.17256 39.234 0.0166016 48.0613 0.0166016ZM48.0613 5.55418C53.8304 5.55418 58.507 10.2307 58.507 15.9999C58.507 21.769 53.8304 26.4455 48.0613 26.4455C42.2921 26.4455 37.6156 21.769 37.6156 15.9999C37.6156 10.2307 42.2921 5.55418 48.0613 5.55418Z" fill="currentColor"/>
                                      <path d="M24.195 31.9831H18.1457V18.6644H6.04814V31.9831H0V0.51076H6.04814V12.6162H18.1457V0.507343L24.195 0.512241V31.9831ZM96.1666 31.9831H91.5077L78.0686 12.1627V31.9831H72.1784V0.596537H76.9198L90.4654 19.4173L90.2865 0.512127H96.1666V31.9831ZM144.245 0.512241H157.47C160.629 0.512241 163.282 2.55244 164.321 3.75696C165.194 4.76772 166.674 7.29467 166.674 10.1179C166.674 11.7293 166.492 14.2812 165.388 16.1057C164.361 17.8038 162.282 19.7252 159.906 20.2986L168.776 31.9832H161.697L149.872 18.2494V31.9832H144.245L144.245 0.512241ZM150.3 5.96609V15.201H155.474C159.066 15.201 160.736 13.0307 160.791 10.5175C160.84 8.22432 158.453 5.95208 156.05 5.95584L150.3 5.96609Z" fill="currentColor"/>
                                      <path fill-rule="evenodd" clip-rule="evenodd" d="M120.284 0.0166016C129.111 0.0166016 136.267 7.17256 136.267 15.9999C136.267 24.8272 129.111 31.9831 120.284 31.9831C111.457 31.9831 104.301 24.8272 104.301 15.9999C104.301 7.17256 111.457 0.0166016 120.284 0.0166016ZM120.284 5.55418C126.053 5.55418 130.729 10.2307 130.729 15.9999C130.729 21.769 126.053 26.4455 120.284 26.4455C114.515 26.4455 109.838 21.769 109.838 15.9999C109.838 10.2307 114.515 5.55418 120.284 5.55418Z" fill="currentColor"/>
                                    </svg>
                                  </label>
                                </div>
                                
  
                                
                                <div class="flex items-center">
                                  <label for="hs-pro-shmflobr6" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmflobr6">
                                    <span class="ms-2 text-foreground">realme</span>
                                    <svg class="ms-auto shrink-0 w-auto h-3 text-foreground" width="126" height="32" viewBox="0 0 126 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M46.8833 31.2942C44.2174 30.9857 42.0625 30.0006 40.3312 28.2997C38.1904 26.1975 37.054 23.3632 37.054 20.1245C37.054 13.6147 41.7406 8.84211 48.1213 8.8525C49.8037 8.85547 51.4816 9.24787 52.9629 9.98668C53.6691 10.339 54.5726 10.9406 55.0503 11.3768C55.2313 11.5422 55.3967 11.6772 55.4175 11.6772C55.4382 11.6772 55.456 11.126 55.456 10.4533V9.22784H58.2192V31.0213H55.456V28.4985L55.2038 28.7077C53.3509 30.2431 51.6641 30.9909 49.4284 31.269C48.9388 31.3298 47.3269 31.3462 46.8833 31.2942ZM49.4313 28.4095C52.7715 27.8487 55.0874 25.4891 55.7476 21.9731C55.9011 21.1578 55.9048 19.1068 55.755 18.3035C55.5799 17.3666 55.3455 16.6478 54.9561 15.8541C53.8063 13.5116 51.7805 12.0918 49.0812 11.7358C48.1466 11.6119 46.7817 11.6913 45.8886 11.9205C43.2842 12.5888 41.2755 14.4759 40.3661 17.11C39.9885 18.2041 39.9121 18.7115 39.9121 20.1245C39.9121 21.2113 39.9321 21.4687 40.0582 22.0346C40.8148 25.4149 43.2404 27.8264 46.4701 28.4117C47.1407 28.5326 48.7029 28.5319 49.4313 28.4095ZM22.783 31.2067C20.9359 31.0131 19.2298 30.413 17.7708 29.445C16.9548 28.9035 15.679 27.6202 15.1226 26.782C13.7637 24.7332 13.1117 22.275 13.2074 19.5593C13.2949 17.0907 13.9818 14.9825 15.3155 13.091C15.5098 12.8143 16.009 12.2476 16.423 11.8307C17.9028 10.3442 19.6846 9.4029 21.832 8.97341C22.6969 8.80057 24.6322 8.7353 25.532 8.84805C29.677 9.37026 32.7821 12.146 33.8488 16.2844C34.1084 17.2924 34.2256 18.1507 34.2709 19.3865L34.3102 20.4695H15.9957L16.0372 21.1133C16.2227 23.9759 17.8835 26.5402 20.3633 27.7923C21.5353 28.3842 22.6531 28.6416 24.0588 28.6431C26.4696 28.6461 28.2907 27.9013 29.8076 26.2947C30.1866 25.8934 31.0419 24.7443 31.1895 24.4395C31.2081 24.4016 33.6003 25.9675 33.6003 26.0172C33.6003 26.1693 32.6204 27.4733 32.0797 28.0393C30.0828 30.1311 27.6082 31.1622 24.3993 31.2386C23.8118 31.2534 23.0849 31.2386 22.783 31.2067ZM31.4336 17.7538C30.9136 14.4796 28.6793 12.1059 25.5298 11.4821C24.8666 11.3508 23.1524 11.3656 22.484 11.5088C20.8966 11.8493 19.5725 12.5362 18.4725 13.591C17.3079 14.7081 16.532 16.1108 16.1166 17.848L16.0751 18.0209H31.4751L31.4336 17.7538ZM114.523 31.2023C109.711 30.7542 106.139 27.4934 105.171 22.6681C104.513 19.3843 105.123 15.9602 106.82 13.4293C108.444 11.0037 110.759 9.50378 113.755 8.93261C114.6 8.77164 117.115 8.77239 117.914 8.93484C119.913 9.34059 121.565 10.2107 122.941 11.583C124.926 13.5606 125.984 16.3578 125.984 19.6194V20.4695L107.74 20.5014L107.757 21.0043C107.823 22.9826 108.758 25.0514 110.226 26.466C111.364 27.5631 112.744 28.2574 114.355 28.5445C115.07 28.6713 116.608 28.6706 117.328 28.5445C119.56 28.1484 121.177 27.0513 122.559 24.9921C122.757 24.6984 122.941 24.4647 122.97 24.4729C123.045 24.4921 125.185 25.8689 125.276 25.9564C125.372 26.0476 124.783 26.9356 124.094 27.7382C121.893 30.2965 118.394 31.5635 114.523 31.2023ZM123.157 17.848C123.157 17.7531 123.102 17.4467 123.036 17.1671C122.281 14.0175 120.057 11.9205 116.972 11.448C115.797 11.2677 114.394 11.3916 113.204 11.7818C110.631 12.6252 108.641 14.7578 107.958 17.403C107.89 17.6678 107.834 17.9148 107.834 17.9519C107.834 18.0008 110.038 18.0209 115.496 18.0209H123.159L123.157 17.848ZM0 9.16553H13.0634V11.7395L2.79502 11.7714L2.76312 31.0213H0V9.16553ZM63.0548 0.435547H65.881V30.9582H63.0548V0.435547ZM70.7174 20.0608V9.16404H73.4805L73.4864 12.0221L73.7193 11.7402C74.4871 10.8071 75.2786 10.1506 76.1746 9.70332C77.2428 9.16924 78.1826 8.93632 79.5097 8.87253C81.0407 8.80057 82.2861 9.03794 83.4982 9.63285C84.7837 10.2634 85.7087 11.1698 86.5803 12.6541C86.6396 12.7565 86.6767 12.7283 86.903 12.396C88.0905 10.6565 89.8575 9.506 92.0709 9.03127C92.9484 8.84285 94.8763 8.82357 95.7264 8.99418C97.2804 9.30795 98.5044 9.9392 99.5169 10.951C100.595 12.028 101.256 13.3254 101.663 15.1554L101.831 15.9157L101.872 30.9575H99.1045V24.2444C99.1045 20.0585 99.08 17.2865 99.0392 16.8808C98.781 14.3023 97.4466 12.439 95.3607 11.7432C94.5422 11.4736 93.675 11.384 92.8186 11.4806C90.1282 11.7721 88.3895 13.2275 87.782 15.6961C87.6529 16.2198 87.6499 16.3726 87.6284 23.5938L87.6062 30.9575H84.8482V24.3727C84.8482 20.4368 84.8223 17.469 84.7837 16.9957C84.527 13.8298 82.7891 11.8233 80.0126 11.4858C77.4794 11.1772 74.8498 12.6563 73.8959 14.9277C73.4968 15.8749 73.5198 15.3839 73.4968 23.5323L73.476 30.9582H70.7166V20.0615L70.7174 20.0608Z" fill="currentColor"/>
                                    </svg>
                                  </label>
                                </div>
                                
                              </div>

<div id="hs-pro-shfcbr-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-pro-shfcbr" role="region">
                                <div class="space-y-0.5">
                                  
                                  <div class="flex items-center">
                                    <label for="hs-pro-shmflobr7" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                      <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmflobr7">
                                      <span class="ms-2 text-foreground">Google</span>
                                      <svg class="ms-auto shrink-0 size-4" width="33" height="34" viewBox="0 0 33 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <mask id="mask0_4621_2546" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="33" height="34">
                                        <path d="M32.0279 13.995H16.7721V20.3205H25.5535C24.7349 24.3391 21.3117 26.6461 16.7721 26.6461C11.414 26.6461 7.0977 22.3298 7.0977 16.9717C7.0977 11.6136 11.414 7.29728 16.7721 7.29728C19.0791 7.29728 21.1628 8.11591 22.8 9.45544L27.5628 4.69263C24.6605 2.1624 20.9396 0.599609 16.7721 0.599609C7.69305 0.599609 0.400024 7.89263 0.400024 16.9717C0.400024 26.0508 7.69305 33.3438 16.7721 33.3438C24.9582 33.3438 32.4 27.3903 32.4 16.9717C32.4 16.0043 32.2512 14.9624 32.0279 13.995Z" fill="white"/>
                                        </mask>
                                        <g mask="url(#mask0_4621_2546)">
                                        <path d="M-1.08832 26.6457V7.29688L11.5628 16.9713L-1.08832 26.6457Z" fill="#FBBC05"/>
                                        </g>
                                        <mask id="mask1_4621_2546" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="33" height="34">
                                        <path d="M32.0279 13.995H16.7721V20.3205H25.5535C24.7349 24.3391 21.3117 26.6461 16.7721 26.6461C11.414 26.6461 7.0977 22.3298 7.0977 16.9717C7.0977 11.6136 11.414 7.29728 16.7721 7.29728C19.0791 7.29728 21.1628 8.11591 22.8 9.45544L27.5628 4.69263C24.6605 2.1624 20.9396 0.599609 16.7721 0.599609C7.69305 0.599609 0.400024 7.89263 0.400024 16.9717C0.400024 26.0508 7.69305 33.3438 16.7721 33.3438C24.9582 33.3438 32.4 27.3903 32.4 16.9717C32.4 16.0043 32.2512 14.9624 32.0279 13.995Z" fill="white"/>
                                        </mask>
                                        <g mask="url(#mask1_4621_2546)">
                                        <path d="M-1.08832 7.29738L11.5628 16.9718L16.7721 12.4323L34.6326 9.52993V-0.888672H-1.08832V7.29738Z" fill="#EA4335"/>
                                        </g>
                                        <mask id="mask2_4621_2546" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="33" height="34">
                                        <path d="M32.0279 13.995H16.7721V20.3205H25.5535C24.7349 24.3391 21.3117 26.6461 16.7721 26.6461C11.414 26.6461 7.0977 22.3298 7.0977 16.9717C7.0977 11.6136 11.414 7.29728 16.7721 7.29728C19.0791 7.29728 21.1628 8.11591 22.8 9.45544L27.5628 4.69263C24.6605 2.1624 20.9396 0.599609 16.7721 0.599609C7.69305 0.599609 0.400024 7.89263 0.400024 16.9717C0.400024 26.0508 7.69305 33.3438 16.7721 33.3438C24.9582 33.3438 32.4 27.3903 32.4 16.9717C32.4 16.0043 32.2512 14.9624 32.0279 13.995Z" fill="white"/>
                                        </mask>
                                        <g mask="url(#mask2_4621_2546)">
                                        <path d="M-1.08832 26.6462L21.2373 9.52993L27.1163 10.2741L34.6326 -0.888672V34.8323H-1.08832V26.6462Z" fill="#34A853"/>
                                        </g>
                                        <mask id="mask3_4621_2546" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="33" height="34">
                                        <path d="M32.0279 13.995H16.7721V20.3205H25.5535C24.7349 24.3391 21.3117 26.6461 16.7721 26.6461C11.414 26.6461 7.0977 22.3298 7.0977 16.9717C7.0977 11.6136 11.414 7.29728 16.7721 7.29728C19.0791 7.29728 21.1628 8.11591 22.8 9.45544L27.5628 4.69263C24.6605 2.1624 20.9396 0.599609 16.7721 0.599609C7.69305 0.599609 0.400024 7.89263 0.400024 16.9717C0.400024 26.0508 7.69305 33.3438 16.7721 33.3438C24.9582 33.3438 32.4 27.3903 32.4 16.9717C32.4 16.0043 32.2512 14.9624 32.0279 13.995Z" fill="white"/>
                                        </mask>
                                        <g mask="url(#mask3_4621_2546)">
                                        <path d="M34.6326 34.8318L11.5628 16.9713L8.58606 14.7387L34.6326 7.29688V34.8318Z" fill="#4285F4"/>
                                        </g>
                                      </svg>
                                    </label>
                                  </div>

<div class="flex items-center">
                                    <label for="hs-pro-shmflobr8" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                      <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmflobr8">
                                      <span class="ms-2 text-foreground">Asus</span>
                                      <svg class="ms-auto shrink-0 w-auto h-2 text-foreground" width="162" height="32" viewBox="0 0 162 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M154.848 4.05253C154.848 2.22139 156.319 0.72045 158.12 0.72045C158.991 0.72045 159.801 1.08068 160.432 1.68105C161.062 2.31144 161.392 3.15197 161.392 4.02251C161.392 4.89306 161.062 5.73358 160.432 6.36398C159.801 6.99437 158.991 7.3546 158.12 7.3546C156.319 7.3546 154.848 5.88368 154.848 4.05253ZM154.578 4.05253C154.578 6.03377 156.169 7.65478 158.15 7.65478C159.111 7.65478 159.981 7.29456 160.642 6.60413C161.302 5.9137 161.692 5.01313 161.692 4.05253C161.692 3.09193 161.332 2.19137 160.642 1.50094C159.951 0.810507 159.081 0.450281 158.15 0.450281C156.169 0.450281 154.578 2.07129 154.578 4.05253ZM156.799 6.18387H157.31V4.50281H158.45C158.63 4.50281 158.781 4.50281 158.901 4.56285C159.051 4.65291 159.141 4.83302 159.171 5.07317L159.231 5.73358V6.03377C159.261 6.09381 159.261 6.12383 159.291 6.15385H159.921V6.06379C159.831 6.03377 159.801 5.94371 159.771 5.82364C159.741 5.7636 159.741 5.64353 159.741 5.49343L159.711 4.98311C159.711 4.74296 159.651 4.59287 159.591 4.50281C159.501 4.41276 159.381 4.3227 159.231 4.26266C159.411 4.17261 159.531 4.05253 159.621 3.90244C159.711 3.75235 159.741 3.57223 159.741 3.33208C159.741 2.8818 159.561 2.58161 159.231 2.4015C159.051 2.31144 158.811 2.28143 158.54 2.28143H156.829L156.799 6.18387ZM157.28 4.05253V2.70169H158.48C158.66 2.70169 158.811 2.73171 158.901 2.79175C159.081 2.8818 159.171 3.09193 159.171 3.3621C159.171 3.63227 159.111 3.81238 158.961 3.90244C158.841 3.9925 158.66 4.05253 158.42 4.05253H157.28ZM15.0507 9.00563L0.461594 31.94H10.4278L24.4766 10.0263L15.0507 9.00563ZM75.1183 8.49531V0H46.7505C42.8781 0.24015 41.1971 2.10131 39.9363 3.42214C38.5854 4.83302 37.835 7.80488 37.835 7.80488V0.0600375H22.7355C21.5948 0.0600375 20.5141 0.540338 19.7036 1.68105C18.8631 2.79174 15.4109 8.49531 15.4109 8.49531H75.1183ZM152.266 8.49531V0H121.918C118.075 0.24015 116.364 2.10131 115.103 3.42214C113.752 4.83302 113.002 7.80488 113.002 7.80488V8.49531H152.266ZM85.0845 0.0300188H76.5892V8.49531H85.0845V0.0300188ZM112.912 0.0300188H104.447V8.49531H112.912V0.0300188ZM112.912 11.5572L104.567 11.0469V20.863C104.567 20.863 104.537 23.6848 101.805 23.6848H87.516C87.516 23.6848 85.0845 23.4747 85.0845 20.8931V9.72608L76.6792 9.1257V24.1651C78.0301 31.3696 84.5442 31.94 84.5442 31.94C84.5442 31.94 85.2046 31.97 85.3246 32H104.687C104.687 32 112.972 31.3396 112.972 23.3546L112.912 11.5572ZM29.1895 31.94H68.8744C75.7787 30.5591 76.4991 24.2552 76.4991 24.2552C76.8293 22.394 76.6492 20.863 76.6492 20.863C76.4391 19.6023 74.0376 14.0188 68.8744 13.5385C65.7824 13.2383 38.2552 11.0469 38.2552 11.0469C38.7956 13.8086 40.0263 15.2195 40.8669 16C42.7881 17.8311 45.8199 18.3715 45.8199 18.3715L67.0432 20.1426C67.7036 20.1726 68.9344 20.3527 68.9044 21.9737C68.9044 22.1839 68.7243 23.5947 67.1633 23.5947H37.4747V10.9869L29.2196 10.3865C29.1896 10.3865 29.1895 31.94 29.1895 31.94ZM112.972 32H143.351C150.976 31.5497 152.056 24.3152 152.056 24.3152C152.327 22.424 152.116 20.863 152.116 20.863C151.906 19.152 149.475 13.9887 144.281 13.4784C141.22 13.1782 113.512 11.5572 113.512 11.5572C114.323 14.409 115.433 15.2796 116.274 16.06C118.195 17.9212 121.047 18.3415 121.047 18.3415C121.767 18.4015 142.48 20.1426 142.48 20.1426C143.141 20.1726 144.492 20.2326 144.492 21.8537C144.492 22.334 144.251 22.8443 143.951 23.1144C143.951 23.1144 143.231 23.5047 142.54 23.5047H113.062L112.972 32Z" fill="currentColor"/>
                                      </svg>
                                    </label>
                                  </div>

<div class="flex items-center">
                                    <label for="hs-pro-shmflobr-9" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                      <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmflobr-9">
                                      <span class="ms-2 text-foreground">MSI</span>
                                      <svg class="ms-auto shrink-0 w-auto h-2 text-foreground" width="128" height="33" viewBox="0 0 128 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M115.751 32.817L124.461 8.77676C124.461 8.77676 117.931 8.77676 111.395 10.1173L103.185 32.817H115.751ZM114.243 2.33029L112.569 6.93577C119.099 5.59523 125.635 5.59523 125.635 5.59523L127.309 0.989759C127.309 0.989759 120.773 0.989759 114.243 2.33029ZM68.8438 27.1212C72.782 27.8779 76.7976 28.2115 80.9026 28.2115C85.1745 28.2115 88.1892 27.288 88.5228 24.3567C88.6896 23.0162 87.3491 22.0093 85.0076 20.6688C82.3266 19.1614 79.9851 18.4048 77.6377 16.814C75.2903 15.2232 74.2893 12.7924 75.04 10.1113C75.9635 7.01322 78.1382 5.25563 81.4031 3.58146C85.2579 1.65705 88.2726 0.900391 95.7259 0.900391C100.415 0.900391 104.937 1.31745 109.376 2.24092L107.785 6.59616C103.847 5.83951 99.8309 5.50586 95.7259 5.50586C91.4541 5.50586 88.4394 6.42934 88.1058 9.36064C87.9389 10.7012 89.2795 11.7081 91.6209 13.0486C94.302 14.5559 96.6435 15.3126 98.9909 16.9034C101.338 18.4941 102.339 20.925 101.589 23.606C100.665 26.7042 98.4904 28.4617 95.2255 30.1359C91.3707 32.0603 88.356 32.817 80.9026 32.817C76.2137 32.817 71.6917 32.3999 67.253 31.4764L68.8438 27.1212ZM49.9155 32.817L57.202 12.7984C59.6328 6.0957 50.7555 8.52653 48.7418 10.1173C47.151 11.291 44.3031 14.0555 43.2962 16.9868L37.517 32.9004H24.9577L32.2443 12.7984C34.6751 6.0957 25.7978 8.52653 23.784 10.1173C22.1933 11.291 19.3454 14.0555 18.3385 16.9868L12.5593 32.9004H0L11.5584 0.989759C15.58 0.989759 17.7546 1.91324 19.5122 3.67082C20.1795 4.33811 20.6025 5.17818 20.8527 6.10166C23.2001 4.67771 25.2914 3.58741 26.7153 3.08695C29.313 2.08006 32.5779 0.989759 36.5995 0.989759C40.6211 0.989759 42.7958 1.91324 44.5533 3.67082C45.2206 4.33811 45.6436 5.17818 45.8939 6.10166C48.2413 4.67771 50.3325 3.58741 51.7565 3.08695C54.3541 2.08006 57.6191 0.995717 61.6407 0.995717C65.6623 0.995717 67.8369 1.9192 69.5945 3.67678C71.4355 5.43437 71.3521 8.69931 70.6848 10.5463L62.4748 32.8229H49.9155V32.817Z" fill="currentColor"/>
                                      </svg>
                                    </label>
                                  </div>
                                  
                                </div>
                              </div>

<div class="pb-6 mb-6 border-b border-sidebar-divider last:pb-0 last:mb-0 last:border-b-0">
                              <div class="mb-3">
                                <span class="font-medium text-sm text-foreground">Color</span>
                              </div>
          
                              
                              <div class="flex flex-wrap gap-1">
                                
                                <label for="hs-pro-shflocss-black" class="p-2 group inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-inverse border-black rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-black disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shflocss-black">
                                  <span class="ms-2 text-foreground">Black</span>
                                </label>

<label for="hs-pro-shfloc-white" class="p-2 group inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-plain border-line-3 rounded-sm focus:ring-0 focus:ring-offset-0 focus:checked:border-line-3 checked:text-foreground-inverse checked:border-line-3 checked:bg-none disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-white">
                                  <svg class="shrink-0 size-4 -ms-[17px] opacity-0 group-has-checked:opacity-100 fill-black" viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>
                                  <span class="ms-2 text-foreground">White</span>
                                </label>

<label for="hs-pro-shfloc-gray" class="p-2 group inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-surface-2 border-line-3 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-line-3 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-gray">
                                  <span class="ms-2 text-foreground">Gray</span>
                                </label>

<label for="hs-pro-shfloc-red" class="p-2 group inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-red-500 border-red-500 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-red-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-red">
                                  <span class="ms-2 text-foreground">Red</span>
                                </label>

<label for="hs-pro-shfloc-orange" class="p-2 group inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-orange-500 border-orange-500 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-orange-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-orange">
                                  <span class="ms-2 text-foreground">Orange</span>
                                </label>

<label for="hs-pro-shfloc-yellow" class="p-2 group inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-yellow-500 border-yellow-500 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-yellow-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-yellow">
                                  <span class="ms-2 text-foreground">Yellow</span>
                                </label>

<label for="hs-pro-shfloc-green" class="p-2 group inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-green-500 border-green-500 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-green-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-green">
                                  <span class="ms-2 text-foreground">Green</span>
                                </label>

<label for="hs-pro-shfloc-blue" class="p-2 group inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                  <input type="checkbox" class="shrink-0 size-4.5 bg-blue-500 border-blue-500 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-blue-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-blue">
                                  <span class="ms-2 text-foreground">Blue</span>
                                </label>
                                
                              </div>
                              
                            </div>

<div class="pb-6 mb-6 border-b border-sidebar-divider last:pb-0 last:mb-0 last:border-b-0">
                              <div class="mb-3">
                                <span class="font-medium text-sm text-foreground">Customer reviews</span>
                              </div>
          
                              
                              <div class="space-y-0.5">
                                
                                <div class="flex items-center">
                                  <label for="hs-pro-shmfloc-4-and-up" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="sshrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc-4-and-up" checked>
                                    <span class="ms-2 flex items-center gap-x-0.5">
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                      </svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                      </svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                      </svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                      </svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
                                      </svg>
                                    </span>
                                    <span class="ms-2 text-foreground">& up</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shmfloc-3-and-up" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="sshrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc-3-and-up">
                                    <span class="ms-2 flex items-center gap-x-0.5">
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                      </svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                      </svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                      </svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
                                      </svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
                                      </svg>
                                    </span>
                                    <span class="ms-2 text-foreground">& up</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shmfloc-1-and-up" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="sshrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc-1-and-up">
                                    <span class="ms-2 flex items-center gap-x-0.5">
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                      </svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
                                      </svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
                                      </svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
                                      </svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
                                      </svg>
                                    </span>
                                    <span class="ms-2 text-foreground">& up</span>
                                  </label>
                                </div>
                                
                              </div>
                              
                            </div>

<div class="flex items-center">
                                  <label for="hs-pro-shmfloc-150-300" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc-150-300">
                                    <span class="ms-2 text-foreground">$150-$300</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shmfloc-300-500" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc-300-500">
                                    <span class="ms-2 text-foreground">$300-$500</span>
                                  </label>
                                </div>

<div class="flex items-center">
                                  <label for="hs-pro-shmfloc-over-500" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                                    <input type="checkbox" class="shrink-0 size-4.5 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shmfloc-over-500">
                                    <span class="ms-2 text-foreground">Over $500</span>
                                  </label>
                                </div>
                                
                              </div>

<div class="mx-3 mt-5">
                                <div class="flex justify-center w-full mb-5">
                                  <div class="flex items-center text-sm text-foreground">
                                    <div id="hs-pass-values-to-html-elements-min-target" class="text-center min-w-12">250</div>
                                    -
                                    <div id="hs-pass-values-to-html-elements-max-target" class="text-center min-w-12">750</div>
                                  </div>
                                </div>
                                <label class="sr-only">Example range</label>
                                <div id="hs-pass-values-to-html-elements" class="--prevent-on-load-init" data-hs-range-slider='{
                                  "start": [250, 750],
                                  "range": {
                                    "min": 0,
                                    "max": 1000
                                  },
                                  "formatter": {
                                    "type": "integer",
                                    "prefix": "$"
                                  },
                                  "connect": true,
                                  "cssClasses": {
                                    "target": "relative h-1 rounded-full bg-surface",
                                    "base": "size-full relative z-1",
                                    "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                    "handle": "absolute top-1/2 inset-e-0 size-5 bg-layer border-3 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                    "connects": "relative z-0 size-full rounded-full overflow-hidden",
                                    "connect": "absolute top-0 inset-e-0 z-1 size-full bg-primary origin-top-left ",
                                    "touchArea": "absolute -top-1 -bottom-1 -inset-s-1 -inset-e-1"
                                  }
                                }'></div>
                              </div>
                              
                            </div>
                            
                          </div>
                        </div>

<div class="py-4 px-5 lg:py-6 lg:ps-0 flex items-center gap-x-2 border-t border-sidebar-line">
                          <button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-1.5 text-sm font-medium rounded-full bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-shflo">
                            <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>
                            Clear filters
                          </button>

<button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-1 text-sm font-medium rounded-full 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-focus" data-hs-overlay="#hs-pro-shflo">
                            Show items
                          </button>
                        </div>
                        
                      </div>
                    </div>

Filter Panels

Transaction Filter Panel Pro

Shop Filter Panel Pro

Marketplace Filter Panel Pro