Tailwind CSS Filter Drawers Blocks

All Blocks
Ecommerce
Filter Drawers

Filter Drawers

Ecommerce filter drawers for storefront product refinement, admin product filtering, and overlay-based browsing.

Storefront Filter Drawer with Price Slider Pro

Right-side storefront drawer stacks applied filter tags, grouped option cards, a price range slider, and footer actions for clearing or applying results.

Create a responsive UI block named "Storefront Filter Drawer with Price Slider" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/ecommerce/filter-drawers/#storefront-filter-drawer-with-price-slider. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: ecommerce/filter-drawers
- Block ID: storefront-filter-drawer-with-price-slider
- Source description: Right-side storefront drawer stacks applied filter tags, grouped option cards, a price range slider, and footer actions for clearing or applying results.
- Preview iframe: https://preline.co/blocks/ecommerce/filter-drawers/iframes/pro/storefront-filter-drawer-with-price-slider.html (repo path: blocks/ecommerce/filter-drawers/iframes/pro/storefront-filter-drawer-with-price-slider.html)
- Source markup reference:
  - partials/pro/storefront/offcanvas/filter.html
  - partials/pro/sources/overlay-header.html
  - partials/pro/storefront/forms/filter-tags.html
  - partials/pro/storefront/forms/filter-category.html
  - partials/pro/storefront/forms/filter-size.html
  - partials/pro/storefront/forms/filter-color.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Root is a right-edge Preline offcanvas `<div id="hs-pro-shflo" class="hs-overlay hs-overlay-open:translate-x-0 translate-x-full transition-all duration-300 transform size-full sm:w-100 hidden fixed top-0 inset-e-0 z-80 flex flex-col bg-overlay border-s border-overlay-line" role="dialog" tabindex="-1" aria-labelledby="hs-pro-shflo-label">`, hidden on first load. The `Open` button in the preview is iframe demo chrome (plus an open-on-init script), not part of the block.
  - Header is `py-3 px-6` titled `Filter` with a white close button; the body is `bg-surface` scrollable with `p-2 space-y-2` holding exactly 7 `p-4 bg-layer rounded-lg shadow-2xs` cards in this order: `Applied filters`, `Category`, `Size`, `Color`, `Price`, `Fit`, `Sleeve Length`.
  - `Applied filters` holds 2 removable chips, `Women` and `Clothing`, each with an X button wired via `data-hs-remove-element`. `Category` shows 7 rows with counts - `Shirts (47)`, `T-shirts (89)`, `Polos (35)`, `Trousers (30)`, `Jeans (21)`, `Shorts (5)`, `Jackets (15)` - then a collapsed `hs-collapse` region containing `Sweaters (44)` and `Blazers (1)`, toggled by a `Show more` / `Show less` link with a rotating chevron.
  - `Size` is a `grid grid-cols-3 gap-2` of 27 checkbox size chips in order: `One size`, `2XS`, `XS`, `S`, `M`, `L`, `XL`, `2XL`, `3XL`, `4XL`, then numeric `36`, `38`, `39`, `40`, `41`, `42`, `43`, `44`, `45`, `46`, `48`, `50`, `52`, `54`, `56`, `58`, `60`.
  - `Color` lists 8 rows whose `size-4.5` swatch checkboxes carry the literal color - `Black (70)`, `White (127)`, `Gray (63)`, `Red (32)`, `Orange (25)`, `Yellow (15)`, `Green (12)`, `Blue (86)`; the white swatch overlays a black check SVG revealed by `group-has-checked:opacity-100`. These literal color utilities are content, not the primary token.
  - `Price` stacks 5 bracket checkboxes `$0-$25 (53)`, `$25-$50 (92)`, `$50-$100 (135)`, `$100-$150 (27)`, `$150+ (3)` above a range slider whose readout shows `250` - `750`. `Fit` has 7 rows `Classic (38)`, `Modern (1)`, `Regular (135)`, `Relaxed (26)`, `Skinny (3)`, `Slim (30)`, `Straight (9)`; `Sleeve Length` has 3 rows `Long Sleeve (56)`, `Short Sleeve (78)`, `Sleeveless (2)`.
  - The slider is a Preline range slider over noUiSlider: `data-hs-range-slider` with `"start": [250, 750]`, `"range": {"min": 0, "max": 1000}`, `"connect": true`, and `"formatter": {"type": "integer", "prefix": "$"}`, writing into `#hs-pass-values-to-html-elements-min-target` / `-max-target`. Load `nouislider` before the Preline runtime.
  - First load: no checkbox in any card is checked, the `Category` extra rows are collapsed (`aria-expanded="false"`), and the footer `p-6 border-t border-overlay-footer` holds two equal `w-full` buttons - neutral `Clear filters` with an X icon and primary `Show items` - both carrying `data-hs-overlay="#hs-pro-shflo"`.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div id="hs-pro-shflo" class="hs-overlay hs-overlay-open:translate-x-0
translate-x-full transition-all duration-300 transform
size-full sm:w-100
hidden
fixed top-0 inset-e-0 z-80
flex flex-col
bg-overlay border-s border-overlay-line" role="dialog" tabindex="-1" aria-labelledby="hs-pro-shflo-label">
  
  <div class="py-3 px-6 flex justify-between items-center border-b border-overlay-divider">
    <h2 id="hs-pro-shflo-label" class="font-medium text-foreground">
      Filter
    </h2>
    <button type="button" class="py-1.5 px-2 inline-flex justify-center items-center gap-x-1 rounded-full bg-layer border border-layer-line text-xs text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-pro-shflo">
      <span class="hidden lg:block">Esc</span>
      <span class="block lg:hidden">Close</span>
      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
    </button>
  </div>

<div class="bg-surface 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-2 space-y-2">
      
      <div class="p-4 bg-layer rounded-lg shadow-2xs">
        <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="p-4 bg-layer rounded-lg shadow-2xs">
        <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-shfloc-shirts" 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-shirts">
              <span class="ms-2 text-foreground">Shirts</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(47)</span>
            </label>
          </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="p-4 bg-layer rounded-lg shadow-2xs">
        <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="p-4 bg-layer rounded-lg shadow-2xs">
        <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.5 -ms-4.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="p-4 bg-layer rounded-lg shadow-2xs">
        <div class="mb-3">
          <span class="font-medium text-sm text-foreground">Price</span>
        </div>
        
        <div class="mb-3">
          
          <div class="space-y-0.5">
            
            <div class="flex items-center">
              <label for="hs-pro-shfloc-0-25" 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-0-25">
                <span class="ms-2 text-foreground">$0-$25</span>
                <span class="ms-auto text-xs text-muted-foreground-1">(53)</span>
              </label>
            </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>

<div class="p-4 bg-layer rounded-lg shadow-2xs">
        <div class="mb-3">
          <span class="font-medium text-sm text-foreground">Fit</span>
        </div>
        
        
        <div class="space-y-0.5">
          
          <div class="flex items-center">
            <label for="hs-pro-shfloc-classic" 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-classic">
              <span class="ms-2 text-foreground">Classic</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(38)</span>
            </label>
          </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="p-4 bg-layer rounded-lg shadow-2xs">
        <div class="mb-3">
          <span class="font-medium text-sm text-foreground">Sleeve Length</span>
        </div>
        
        
        <div class="space-y-0.5">
          
          <div class="flex items-center">
            <label for="hs-pro-shfloc-long-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-long-sleeve">
              <span class="ms-2 text-foreground">Long Sleeve</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(56)</span>
            </label>
          </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="p-6 border-t border-overlay-footer">
    <div class="flex items-center gap-x-2">
      <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-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>

Scrollable admin drawer groups vendor, availability, tag, and product-type filters into checkbox sections with per-group clear actions.

Create a responsive UI block named "Admin Product Filter Drawer with Checkbox Sections" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/ecommerce/filter-drawers/#admin-product-filter-drawer-with-checkbox-sections. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: ecommerce/filter-drawers
- Block ID: admin-product-filter-drawer-with-checkbox-sections
- Source description: Scrollable admin drawer groups vendor, availability, tag, and product-type filters into checkbox sections with per-group clear actions.
- Preview iframe: https://preline.co/blocks/ecommerce/filter-drawers/iframes/pro/admin-product-filter-drawer-with-checkbox-sections.html (repo path: blocks/ecommerce/filter-drawers/iframes/pro/admin-product-filter-drawer-with-checkbox-sections.html)
- Source markup reference:
  - partials/pro/ecommerce-admin/offcanvas/checkbox-filter-form.html
  - partials/pro/sources/overlay-header.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Root is a right-edge Preline offcanvas: `<div id="hs-pro-epfo" class="hs-overlay hs-overlay-open:translate-x-0 hidden translate-x-full fixed top-0 inset-e-0 transition-all duration-300 transform size-full sm:w-100 z-80 flex flex-col bg-overlay border border-overlay-line" role="dialog" tabindex="-1" aria-labelledby="hs-pro-epfo-label">`. It is hidden on first load; the `Open` button in the preview is iframe demo chrome (plus an open-on-init script), not part of the block.
  - Header is `py-2.5 px-4` with the title `Filter` and a close button; the body is `h-[calc(100%-58px)]` with a `p-5 overflow-y-auto` scroll region and a `p-5 border-t border-overlay-footer` footer.
  - Exactly 3 filter sections in order, each with an uppercase `font-semibold text-xs` label: `Product vendor`, `Availability`, `Tagged with`. Sections are separated by `pb-5 mb-5 border-b border-line-2` with `last:` resets - there is no product-type section.
  - `Product vendor` is a `grid grid-cols-2` of 17 checkboxes read column-by-column: left column `Google`, `Topman`, `RayBan`, `Mango`, `Calvin Klein`, `Givenchy`, `Asos`, `Apple`, `Zara`; right column `Times`, `Nike`, `Adidas`, `Reebok`, `Levis`, `Beats`, `Clarke`, `Mango`.
  - `Availability` has 2 checkboxes: `Available on Online Store` and `Unavailable on Online Store` (the source uses a non-breaking space after the first word in each). `Tagged with` is a single text input with placeholder `Enter tags` and no checkboxes.
  - Default checked state on first load: only `Google` in `Product vendor` and `Available on Online Store` in `Availability`; everything else is unchecked and the tag input is empty.
  - Each of the 3 sections ends with its own small pill button `Clear` (`rounded-full`, dashed border, X icon, `text-primary`). The footer holds two equal `w-full` buttons: neutral `Clear all filters` with an X icon hidden below `sm`, then primary `Save` carrying `data-hs-overlay="#hs-pro-epfo"`.
  - Behavior is Preline HSOverlay only - no dropdowns, tabs, sliders, or charts, and no images, avatars, or brand marks anywhere in the drawer.

<div id="hs-pro-epfo" class="hs-overlay hs-overlay-open:translate-x-0 hidden translate-x-full fixed top-0 inset-e-0 transition-all duration-300 transform size-full sm:w-100 z-80 flex flex-col bg-overlay border border-overlay-line" role="dialog" tabindex="-1" aria-labelledby="hs-pro-epfo-label">
  
  <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
    <h2 id="hs-pro-epfo-label" class="font-medium text-foreground">
      Filter
    </h2>
    <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-epfo">
      <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-[calc(100%-58px)] flex flex-col">
    
    <div class="h-full p-5 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="pb-5 mb-5 last:pb-0 last:mb-0 border-b last:border-b-0 border-line-2">
        <label class="font-semibold text-xs uppercase text-foreground">
          Product vendor
        </label>

<div class="mt-3 grid grid-cols-2">
          <div class="space-y-2">
            
            <div class="flex items-center">
              <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-epfopvch1" checked>
              <label for="hs-pro-epfopvch1" class="ms-3 text-sm text-foreground">
                Google
              </label>
            </div>

<div class="flex items-center">
              <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-epfopvch2">
              <label for="hs-pro-epfopvch2" class="ms-3 text-sm text-foreground">
                Topman
              </label>
            </div>

<div class="flex items-center">
              <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-epfopvch3">
              <label for="hs-pro-epfopvch3" class="ms-3 text-sm text-foreground">
                RayBan
              </label>
            </div>

<div class="flex items-center">
              <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-epfopvch4">
              <label for="hs-pro-epfopvch4" class="ms-3 text-sm text-foreground">
                Mango
              </label>
            </div>

<div class="flex items-center">
              <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-epfopvch5">
              <label for="hs-pro-epfopvch5" class="ms-3 text-sm text-foreground">
                Calvin Klein
              </label>
            </div>

<div class="flex items-center">
              <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-epfopvch6">
              <label for="hs-pro-epfopvch6" class="ms-3 text-sm text-foreground">
                Givenchy
              </label>
            </div>

<div class="flex items-center">
              <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-epfopvch7">
              <label for="hs-pro-epfopvch7" class="ms-3 text-sm text-foreground">
                Asos
              </label>
            </div>

<div class="flex items-center">
              <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-epfopvch8">
              <label for="hs-pro-epfopvch8" class="ms-3 text-sm text-foreground">
                Apple
              </label>
            </div>

<div class="flex items-center">
              <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-epfopvch9">
              <label for="hs-pro-epfopvch9" class="ms-3 text-sm text-foreground">
                Zara
              </label>
            </div>
            
          </div>

<div class="space-y-2">
            
            <div class="flex items-center">
              <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-epfopvch10">
              <label for="hs-pro-epfopvch10" class="ms-3 text-sm text-foreground">
                Times
              </label>
            </div>

<div class="flex items-center">
              <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-epfopvch11">
              <label for="hs-pro-epfopvch11" class="ms-3 text-sm text-foreground">
                Nike
              </label>
            </div>

<div class="flex items-center">
              <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-epfopvch12">
              <label for="hs-pro-epfopvch12" class="ms-3 text-sm text-foreground">
                Adidas
              </label>
            </div>

<div class="flex items-center">
              <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-epfopvch17">
              <label for="hs-pro-epfopvch17" class="ms-3 text-sm text-foreground">
                Reebok
              </label>
            </div>

<div class="flex items-center">
              <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-epfopvch13">
              <label for="hs-pro-epfopvch13" class="ms-3 text-sm text-foreground">
                Levis
              </label>
            </div>

<div class="flex items-center">
              <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-epfopvch14">
              <label for="hs-pro-epfopvch14" class="ms-3 text-sm text-foreground">
                Beats
              </label>
            </div>

<div class="flex items-center">
              <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-epfopvch15">
              <label for="hs-pro-epfopvch15" class="ms-3 text-sm text-foreground">
                Clarke
              </label>
            </div>

<div class="flex items-center">
              <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-epfopvch16">
              <label for="hs-pro-epfopvch16" class="ms-3 text-sm text-foreground">
                Mango
              </label>
            </div>
            
          </div>
          
        </div>

<p class="mt-3">
          <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs font-medium rounded-full bg-layer border border-dashed border-layer-line text-primary hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
            <svg class="shrink-0 size-3" 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
          </button>
        </p>
        
      </div>

<div class="pb-5 mb-5 last:pb-0 last:mb-0 border-b last:border-b-0 border-line-2">
        <label class="font-semibold text-xs uppercase text-foreground">
          Availability
        </label>

<div class="mt-3 space-y-2">
          
          <div class="flex items-center">
            <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-epfoach1" checked>
            <label for="hs-pro-epfoach1" class="ms-3 text-sm text-foreground">
              Available on Online Store
            </label>
          </div>

<div class="flex items-center">
            <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-epfoach2">
            <label for="hs-pro-epfoach2" class="ms-3 text-sm text-foreground">
              Unavailable on Online Store
            </label>
          </div>
          
        </div>

<div class="pb-5 mb-5 last:pb-0 last:mb-0 border-b last:border-b-0 border-line-2">
        <label class="font-semibold text-xs uppercase text-foreground">
          Tagged with
        </label>

<div class="p-5 border-t border-overlay-footer">
      <div class="flex items-center gap-x-2">
        
        <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-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">
          <svg class="hidden sm:block 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 all 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-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus" data-hs-overlay="#hs-pro-epfo">
          Save
        </button>
        
      </div>  
    </div>
    
  </div>
  
</div>

Filter Drawers

Storefront Filter Drawer with Price Slider Pro

Admin Product Filter Drawer with Checkbox Sections Pro