```css
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM PRODUCT FILTER SYSTEM
   ------------------------------------------------------------
   File: /assets/css/components/product-filter.css
   Full Path:
   /public_html/assets/css/components/product-filter.css

   Version: 1.0

   Used For:
   - Our Products Page
   - Category Filtering
   - Product Search
   - Product Sorting
   - Dynamic PHP / Database Products
   - Future Product Categories

   Depends On:
   - variables.css
   - reset.css
   - typography.css
   - utilities.css
   - global.css
   - buttons.css
   - forms.css
   - badges.css
   - product-card.css
   ============================================================ */


/* ============================================================
   01. PRODUCT FILTER WRAPPER
   ============================================================ */

.product-filter {
    position: relative;

    width: 100%;

    margin-bottom:
        clamp(2rem, 4vw, 3rem);
}


/* ============================================================
   02. PRODUCT FILTER PANEL
   ============================================================ */

.product-filter-panel {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-5);

    width: 100%;

    padding:
        var(--space-4)
        var(--space-5);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-xl);

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 14px 42px rgba(11, 43, 32, 0.05);

    isolation: isolate;
}


/* ============================================================
   03. PREMIUM GOLD TOP LINE
   ============================================================ */

.product-filter-panel::before {
    content: "";

    position: absolute;

    top: 0;
    right: 24px;
    left: 24px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(183, 138, 61, 0.42),
            transparent
        );

    pointer-events: none;
}


/* ============================================================
   04. FILTER LEFT
   ============================================================ */

.product-filter-left {
    display: flex;

    align-items: center;

    flex: 1 1 auto;

    gap: var(--space-4);

    min-width: 0;
}


/* ============================================================
   05. FILTER RIGHT
   ============================================================ */

.product-filter-right {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex: 0 0 auto;

    gap: var(--space-3);
}


/* ============================================================
   06. FILTER LABEL
   ============================================================ */

.product-filter-label {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    flex: 0 0 auto;

    color: var(--color-primary-deep);

    font-family: var(--font-ui);

    font-size: 0.52rem;

    font-weight: var(--font-bold);

    line-height: 1;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    white-space: nowrap;
}


/* ============================================================
   07. FILTER LABEL ICON
   ============================================================ */

.product-filter-label-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 28px;
    height: 28px;

    border:
        1px solid var(--border-gold);

    border-radius:
        9px;

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    font-size: 0.5rem;
}


/* ============================================================
   08. CATEGORY FILTERS
   ============================================================ */

.product-filter-categories {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    min-width: 0;
}


/* ============================================================
   09. FILTER BUTTON
   ============================================================ */

.product-filter-btn {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 38px;

    padding:
        0
        15px;

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-pill);

    outline: none;

    color: var(--text-body);

    background:
        var(--bg-soft);

    font-family: var(--font-ui);

    font-size: 0.5rem;

    font-weight: var(--font-semibold);

    line-height: 1;

    cursor: pointer;

    white-space: nowrap;

    transition:
        color var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}


/* ============================================================
   10. FILTER BUTTON HOVER
   ============================================================ */

.product-filter-btn:hover {
    color: var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.28);

    background:
        var(--bg-gold-soft);

    transform:
        translateY(-1px);
}


/* ============================================================
   11. ACTIVE FILTER BUTTON
   ============================================================ */

.product-filter-btn.active,
.product-filter-btn.is-active,
.product-filter-btn[aria-pressed="true"] {
    color: var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.38);

    background:
        var(--gradient-gold);

    box-shadow:
        0 9px 24px rgba(183, 138, 61, 0.15);

    font-weight: var(--font-bold);
}


/* ============================================================
   12. FILTER BUTTON DOT
   ============================================================ */

.product-filter-btn-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius:
        var(--radius-circle);

    background:
        var(--color-secondary);

    transition:
        background-color var(--transition),
        box-shadow var(--transition);
}


/* ============================================================
   13. ACTIVE FILTER DOT
   ============================================================ */

.product-filter-btn.active
.product-filter-btn-dot,

.product-filter-btn.is-active
.product-filter-btn-dot,

.product-filter-btn[aria-pressed="true"]
.product-filter-btn-dot {
    background:
        var(--color-primary-deep);

    box-shadow:
        0 0 0 4px rgba(11, 43, 32, 0.08);
}


/* ============================================================
   14. FILTER COUNT
   ============================================================ */

.product-filter-count {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 21px;
    height: 21px;

    padding:
        0
        6px;

    border-radius:
        var(--radius-pill);

    color: var(--text-muted);

    background:
        rgba(11, 43, 32, 0.055);

    font-size: 0.42rem;

    font-weight: var(--font-bold);

    line-height: 1;
}


/* ============================================================
   15. ACTIVE FILTER COUNT
   ============================================================ */

.product-filter-btn.active
.product-filter-count,

.product-filter-btn.is-active
.product-filter-count,

.product-filter-btn[aria-pressed="true"]
.product-filter-count {
    color: var(--color-primary-deep);

    background:
        rgba(11, 43, 32, 0.08);
}


/* ============================================================
   16. PRODUCT SEARCH
   ============================================================ */

.product-search {
    position: relative;

    width: min(100%, 250px);

    flex: 0 1 250px;
}


/* ============================================================
   17. PRODUCT SEARCH INPUT
   ============================================================ */

.product-search-input {
    width: 100%;
    height: 42px;

    padding:
        0
        42px
        0
        15px;

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-pill);

    outline: none;

    color: var(--color-primary-deep);

    background:
        var(--bg-soft);

    font-family: var(--font-ui);

    font-size: 0.52rem;

    font-weight: var(--font-medium);

    transition:
        border-color var(--transition),
        background-color var(--transition),
        box-shadow var(--transition);
}


/* ============================================================
   18. SEARCH PLACEHOLDER
   ============================================================ */

.product-search-input::placeholder {
    color: var(--text-muted);

    opacity: 0.72;
}


/* ============================================================
   19. SEARCH INPUT FOCUS
   ============================================================ */

.product-search-input:focus {
    border-color:
        rgba(183, 138, 61, 0.42);

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px rgba(183, 138, 61, 0.07);
}


/* ============================================================
   20. SEARCH BUTTON
   ============================================================ */

.product-search-button {
    position: absolute;

    top: 50%;
    right: 5px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;

    border: 0;

    border-radius:
        var(--radius-circle);

    color: var(--color-secondary-dark);

    background: transparent;

    cursor: pointer;

    transform:
        translateY(-50%);

    transition:
        color var(--transition),
        background-color var(--transition);
}


/* ============================================================
   21. SEARCH BUTTON HOVER
   ============================================================ */

.product-search-button:hover {
    color: var(--color-primary-deep);

    background:
        var(--bg-gold-soft);
}


/* ============================================================
   22. SEARCH CLEAR BUTTON
   ============================================================ */

.product-search-clear {
    position: absolute;

    top: 50%;
    right: 40px;

    display: none;

    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    padding: 0;

    border: 0;

    border-radius:
        var(--radius-circle);

    color: var(--text-muted);

    background: transparent;

    cursor: pointer;

    transform:
        translateY(-50%);
}


/* ============================================================
   23. SHOW SEARCH CLEAR
   ============================================================ */

.product-search.has-value
.product-search-clear {
    display: inline-flex;
}


/* ============================================================
   24. SEARCH WITH CLEAR INPUT
   ============================================================ */

.product-search.has-value
.product-search-input {
    padding-right: 68px;
}


/* ============================================================
   25. SORT WRAPPER
   ============================================================ */

.product-sort {
    position: relative;

    flex: 0 0 auto;
}


/* ============================================================
   26. SORT SELECT
   ============================================================ */

.product-sort-select {
    min-width: 155px;
    height: 42px;

    padding:
        0
        38px
        0
        14px;

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-pill);

    outline: none;

    color: var(--color-primary-deep);

    background-color:
        var(--bg-soft);

    font-family: var(--font-ui);

    font-size: 0.5rem;

    font-weight: var(--font-semibold);

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    transition:
        border-color var(--transition),
        background-color var(--transition),
        box-shadow var(--transition);
}


/* ============================================================
   27. SORT SELECT FOCUS
   ============================================================ */

.product-sort-select:focus {
    border-color:
        rgba(183, 138, 61, 0.42);

    background-color:
        #ffffff;

    box-shadow:
        0 0 0 4px rgba(183, 138, 61, 0.07);
}


/* ============================================================
   28. SORT ARROW
   ============================================================ */

.product-sort::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 16px;

    width: 6px;
    height: 6px;

    border-right:
        1.5px solid var(--color-secondary-dark);

    border-bottom:
        1.5px solid var(--color-secondary-dark);

    pointer-events: none;

    transform:
        translateY(-65%)
        rotate(45deg);
}


/* ============================================================
   29. VIEW SWITCHER
   ============================================================ */

.product-view-switcher {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 4px;

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-pill);

    background:
        var(--bg-soft);
}


/* ============================================================
   30. VIEW BUTTON
   ============================================================ */

.product-view-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    padding: 0;

    border: 0;

    border-radius:
        var(--radius-circle);

    color: var(--text-muted);

    background: transparent;

    cursor: pointer;

    transition:
        color var(--transition),
        background-color var(--transition),
        box-shadow var(--transition);
}


/* ============================================================
   31. VIEW BUTTON HOVER
   ============================================================ */

.product-view-btn:hover {
    color: var(--color-primary-deep);

    background: #ffffff;
}


/* ============================================================
   32. ACTIVE VIEW BUTTON
   ============================================================ */

.product-view-btn.active,
.product-view-btn.is-active,
.product-view-btn[aria-pressed="true"] {
    color: var(--color-primary-deep);

    background:
        var(--gradient-gold);

    box-shadow:
        0 6px 16px rgba(183, 138, 61, 0.14);
}


/* ============================================================
   33. PRODUCT RESULTS BAR
   ============================================================ */

.product-results-bar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-4);

    width: 100%;

    margin-top:
        var(--space-4);
}


/* ============================================================
   34. RESULTS COUNT
   ============================================================ */

.product-results-count {
    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.52rem;

    font-weight: var(--font-medium);

    line-height: 1.5;
}


/* ============================================================
   35. RESULTS COUNT STRONG
   ============================================================ */

.product-results-count strong {
    color: var(--color-primary-deep);

    font-weight: var(--font-bold);
}


/* ============================================================
   36. RESULTS CATEGORY
   ============================================================ */

.product-results-category {
    color: var(--color-secondary-dark);

    font-weight: var(--font-bold);
}


/* ============================================================
   37. CLEAR FILTERS
   ============================================================ */

.product-filter-clear {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 0;

    border: 0;

    color: var(--text-muted);

    background: transparent;

    font-family: var(--font-ui);

    font-size: 0.49rem;

    font-weight: var(--font-semibold);

    cursor: pointer;

    transition:
        color var(--transition);
}


/* ============================================================
   38. CLEAR FILTERS HOVER
   ============================================================ */

.product-filter-clear:hover {
    color: var(--color-secondary-dark);
}


/* ============================================================
   39. FILTER TOOLBAR
   ============================================================ */

.product-filter-toolbar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-4);

    width: 100%;
}


/* ============================================================
   40. FILTER TOOLBAR GROUP
   ============================================================ */

.product-filter-toolbar-group {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-3);
}


/* ============================================================
   41. CATEGORY TABS
   ============================================================ */

.product-category-tabs {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    width: 100%;
}


/* ============================================================
   42. CATEGORY TAB
   ============================================================ */

.product-category-tab {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 40px;

    padding:
        0
        16px;

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-pill);

    color: var(--text-body);

    background:
        #ffffff;

    font-family: var(--font-ui);

    font-size: 0.5rem;

    font-weight: var(--font-semibold);

    text-decoration: none;

    cursor: pointer;

    transition:
        color var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}


/* ============================================================
   43. CATEGORY TAB HOVER
   ============================================================ */

.product-category-tab:hover {
    color: var(--color-primary-deep);

    border-color:
        var(--border-gold);

    background:
        var(--bg-gold-soft);

    transform:
        translateY(-1px);
}


/* ============================================================
   44. CATEGORY TAB ACTIVE
   ============================================================ */

.product-category-tab.active,
.product-category-tab.is-active,
.product-category-tab[aria-current="true"] {
    color: var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.36);

    background:
        var(--gradient-gold);

    box-shadow:
        0 9px 24px rgba(183, 138, 61, 0.14);
}


/* ============================================================
   45. CATEGORY TAB ICON
   ============================================================ */

.product-category-tab-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 0.52rem;
}


/* ============================================================
   46. FILTER CHIPS
   ============================================================ */

.product-filter-chips {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    width: 100%;

    margin-top:
        var(--space-3);
}


/* ============================================================
   47. FILTER CHIP
   ============================================================ */

.product-filter-chip {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 30px;

    padding:
        0
        10px;

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-pill);

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    font-family: var(--font-ui);

    font-size: 0.45rem;

    font-weight: var(--font-semibold);
}


/* ============================================================
   48. FILTER CHIP REMOVE
   ============================================================ */

.product-filter-chip-remove {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 17px;
    height: 17px;

    padding: 0;

    border: 0;

    border-radius:
        var(--radius-circle);

    color: inherit;

    background:
        rgba(183, 138, 61, 0.10);

    cursor: pointer;

    font-size: 0.42rem;
}


/* ============================================================
   49. FILTER SIDEBAR
   ============================================================ */

.product-filter-sidebar {
    position: relative;

    width: 100%;

    padding:
        var(--space-5);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-xl);

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 14px 42px rgba(11, 43, 32, 0.05);
}


/* ============================================================
   50. SIDEBAR TITLE
   ============================================================ */

.product-filter-sidebar-title {
    margin: 0;

    color: var(--color-primary-deep);

    font-family: var(--font-heading);

    font-size: 1.2rem;

    font-weight: var(--font-semibold);

    line-height: 1.3;
}


/* ============================================================
   51. SIDEBAR GROUP
   ============================================================ */

.product-filter-group {
    padding:
        var(--space-5)
        0;

    border-bottom:
        1px solid var(--border-light);
}

.product-filter-group:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


/* ============================================================
   52. SIDEBAR GROUP TITLE
   ============================================================ */

.product-filter-group-title {
    display: block;

    margin-bottom:
        var(--space-3);

    color: var(--color-primary-deep);

    font-family: var(--font-ui);

    font-size: 0.52rem;

    font-weight: var(--font-bold);

    letter-spacing: 0.055em;

    text-transform: uppercase;
}


/* ============================================================
   53. FILTER CHECKBOX LIST
   ============================================================ */

.product-filter-list {
    display: flex;

    flex-direction: column;

    gap: 10px;

    margin: 0;

    padding: 0;

    list-style: none;
}


/* ============================================================
   54. FILTER CHECKBOX LABEL
   ============================================================ */

.product-filter-check {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-3);

    width: 100%;

    color: var(--text-body);

    font-family: var(--font-ui);

    font-size: 0.52rem;

    font-weight: var(--font-medium);

    cursor: pointer;
}


/* ============================================================
   55. CHECKBOX CONTENT
   ============================================================ */

.product-filter-check-content {
    display: flex;

    align-items: center;

    gap: 9px;
}


/* ============================================================
   56. FILTER CHECKBOX
   ============================================================ */

.product-filter-checkbox {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    border:
        1px solid var(--border-light);

    border-radius: 5px;

    background:
        #ffffff;

    transition:
        border-color var(--transition),
        background-color var(--transition),
        box-shadow var(--transition);
}


/* ============================================================
   57. CHECKED FILTER
   ============================================================ */

.product-filter-check.is-checked
.product-filter-checkbox {
    border-color:
        rgba(183, 138, 61, 0.42);

    background:
        var(--gradient-gold);

    box-shadow:
        0 5px 14px rgba(183, 138, 61, 0.14);
}


/* ============================================================
   58. CHECK MARK
   ============================================================ */

.product-filter-check.is-checked
.product-filter-checkbox::after {
    content: "";

    width: 6px;
    height: 3px;

    border-left:
        1.5px solid var(--color-primary-deep);

    border-bottom:
        1.5px solid var(--color-primary-deep);

    transform:
        translateY(-1px)
        rotate(-45deg);
}


/* ============================================================
   59. CHECKBOX COUNT
   ============================================================ */

.product-filter-check-count {
    color: var(--text-muted);

    font-size: 0.46rem;

    font-weight: var(--font-semibold);
}


/* ============================================================
   60. MOBILE FILTER BUTTON
   ============================================================ */

.product-mobile-filter-btn {
    display: none;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 42px;

    padding:
        0
        15px;

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-pill);

    color: var(--color-primary-deep);

    background:
        var(--bg-gold-soft);

    font-family: var(--font-ui);

    font-size: 0.5rem;

    font-weight: var(--font-bold);

    cursor: pointer;
}


/* ============================================================
   61. MOBILE FILTER COUNT
   ============================================================ */

.product-mobile-filter-count {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 20px;
    height: 20px;

    padding:
        0
        5px;

    border-radius:
        var(--radius-pill);

    color: var(--color-primary-deep);

    background:
        var(--gradient-gold);

    font-size: 0.42rem;

    font-weight: var(--font-bold);
}


/* ============================================================
   62. DARK FILTER PANEL
   ============================================================ */

.product-filter-dark
.product-filter-panel {
    border-color:
        rgba(255, 255, 255, 0.09);

    background:
        rgba(255, 255, 255, 0.045);

    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.12);

    -webkit-backdrop-filter:
        blur(14px);

    backdrop-filter:
        blur(14px);
}


/* ============================================================
   63. DARK FILTER LABEL
   ============================================================ */

.product-filter-dark
.product-filter-label {
    color: #ffffff;
}


/* ============================================================
   64. DARK FILTER BUTTON
   ============================================================ */

.product-filter-dark
.product-filter-btn {
    color:
        rgba(255, 255, 255, 0.62);

    border-color:
        rgba(255, 255, 255, 0.09);

    background:
        rgba(255, 255, 255, 0.04);
}


/* ============================================================
   65. DARK FILTER HOVER
   ============================================================ */

.product-filter-dark
.product-filter-btn:hover {
    color: var(--color-secondary-light);

    border-color:
        rgba(212, 175, 104, 0.20);

    background:
        rgba(212, 175, 104, 0.07);
}


/* ============================================================
   66. DARK ACTIVE FILTER
   ============================================================ */

.product-filter-dark
.product-filter-btn.active,

.product-filter-dark
.product-filter-btn.is-active,

.product-filter-dark
.product-filter-btn[aria-pressed="true"] {
    color: var(--color-primary-deep);

    border-color:
        rgba(212, 175, 104, 0.34);

    background:
        var(--gradient-gold);
}


/* ============================================================
   67. DARK SEARCH INPUT
   ============================================================ */

.product-filter-dark
.product-search-input,

.product-filter-dark
.product-sort-select {
    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.09);

    background-color:
        rgba(255, 255, 255, 0.04);
}


/* ============================================================
   68. DARK SEARCH PLACEHOLDER
   ============================================================ */

.product-filter-dark
.product-search-input::placeholder {
    color:
        rgba(255, 255, 255, 0.36);
}


/* ============================================================
   69. DARK RESULTS COUNT
   ============================================================ */

.product-filter-dark
.product-results-count {
    color:
        rgba(255, 255, 255, 0.42);
}

.product-filter-dark
.product-results-count strong {
    color: #ffffff;
}


/* ============================================================
   70. NO RESULTS
   ============================================================ */

.product-filter-no-results {
    display: none;

    grid-column:
        1 / -1;

    width: 100%;

    padding:
        clamp(3rem, 7vw, 5rem)
        var(--space-5);

    border:
        1px dashed var(--border-gold);

    border-radius:
        var(--radius-xl);

    background:
        var(--bg-gold-soft);

    text-align: center;
}


/* ============================================================
   71. SHOW NO RESULTS
   ============================================================ */

.product-filter-no-results.is-visible {
    display: block;
}


/* ============================================================
   72. NO RESULTS ICON
   ============================================================ */

.product-filter-no-results-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 62px;
    height: 62px;

    margin-bottom:
        var(--space-4);

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-circle);

    color: var(--color-secondary-dark);

    background:
        #ffffff;

    font-size: 1rem;
}


/* ============================================================
   73. NO RESULTS TITLE
   ============================================================ */

.product-filter-no-results-title {
    margin: 0;

    color: var(--color-primary-deep);

    font-family: var(--font-heading);

    font-size:
        clamp(1.35rem, 3vw, 1.8rem);

    font-weight: var(--font-semibold);
}


/* ============================================================
   74. NO RESULTS TEXT
   ============================================================ */

.product-filter-no-results-text {
    max-width: 480px;

    margin:
        var(--space-3)
        auto
        0;

    color: var(--text-muted);

    font-size: 0.58rem;

    line-height: 1.7;
}


/* ============================================================
   75. FILTER LOADING
   ============================================================ */

.product-filter-loading {
    position: absolute;

    inset: 0;

    z-index: 10;

    display: none;

    align-items: center;

    justify-content: center;

    border-radius:
        inherit;

    background:
        rgba(255, 255, 255, 0.74);

    -webkit-backdrop-filter:
        blur(5px);

    backdrop-filter:
        blur(5px);
}


/* ============================================================
   76. SHOW FILTER LOADING
   ============================================================ */

.product-filter.is-loading
.product-filter-loading {
    display: flex;
}


/* ============================================================
   77. FILTER SPINNER
   ============================================================ */

.product-filter-spinner {
    width: 32px;
    height: 32px;

    border:
        3px solid rgba(183, 138, 61, 0.16);

    border-top-color:
        var(--color-secondary);

    border-radius:
        var(--radius-circle);

    animation:
        productFilterSpin 0.7s linear infinite;
}


/* ============================================================
   78. FILTER SPINNER KEYFRAMES
   ============================================================ */

@keyframes productFilterSpin {

    to {
        transform:
            rotate(360deg);
    }

}


/* ============================================================
   79. FILTER FOCUS
   ============================================================ */

.product-filter-btn:focus-visible,
.product-search-button:focus-visible,
.product-search-clear:focus-visible,
.product-view-btn:focus-visible,
.product-category-tab:focus-visible,
.product-filter-clear:focus-visible,
.product-filter-chip-remove:focus-visible,
.product-mobile-filter-btn:focus-visible {
    outline:
        2px solid var(--color-secondary);

    outline-offset:
        3px;
}


/* ============================================================
   80. LAPTOP
   ============================================================ */

@media (max-width: 1199.98px) {

    .product-filter-panel {
        align-items: flex-start;
    }

    .product-filter-left {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* ============================================================
   81. TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .product-filter-panel {
        flex-direction: column;
    }

    .product-filter-left,
    .product-filter-right {
        width: 100%;
    }

    .product-filter-right {
        justify-content: flex-start;

        flex-wrap: wrap;
    }

    .product-search {
        flex: 1 1 240px;

        width: auto;
    }

}


/* ============================================================
   82. MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .product-filter-panel {
        padding:
            var(--space-4);

        border-radius:
            var(--radius-lg);
    }

    .product-filter-categories {
        width: 100%;
    }

    .product-filter-btn {
        flex:
            1 1 auto;
    }

    .product-search {
        flex: 1 1 100%;

        width: 100%;
        max-width: none;
    }

    .product-sort {
        flex: 1 1 auto;
    }

    .product-sort-select {
        width: 100%;
    }

    .product-results-bar {
        align-items: flex-start;

        flex-direction: column;
    }

    .product-filter-toolbar {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* ============================================================
   83. SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    .product-filter {
        margin-bottom:
            var(--space-6);
    }

    .product-filter-panel {
        gap: var(--space-4);
    }

    .product-filter-label {
        width: 100%;
    }

    .product-filter-categories {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;
    }

    .product-filter-btn {
        width: 100%;

        min-height: 40px;

        padding:
            0
            10px;
    }

    .product-filter-right {
        display: grid;

        grid-template-columns:
            1fr auto;

        gap: 8px;
    }

    .product-search {
        grid-column:
            1 / -1;
    }

    .product-sort-select {
        min-width: 0;
    }

    .product-category-tabs {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .product-category-tab {
        justify-content: center;

        width: 100%;

        padding:
            0
            10px;
    }

    .product-mobile-filter-btn {
        display: inline-flex;
    }

}


/* ============================================================
   84. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 374.98px) {

    .product-filter-panel {
        padding:
            14px;
    }

    .product-filter-categories,
    .product-category-tabs {
        grid-template-columns: 1fr;
    }

    .product-filter-right {
        grid-template-columns: 1fr;
    }

    .product-view-switcher {
        justify-self: start;
    }

}


/* ============================================================
   85. TOUCH DEVICES
   ============================================================ */

@media (hover: none) {

    .product-filter-btn:hover,
    .product-category-tab:hover {
        transform: none;
    }

}


/* ============================================================
   86. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .product-filter-btn,
    .product-filter-btn-dot,
    .product-search-input,
    .product-search-button,
    .product-sort-select,
    .product-view-btn,
    .product-category-tab,
    .product-filter-checkbox {
        transition: none;
    }

    .product-filter-btn:hover,
    .product-category-tab:hover {
        transform: none;
    }

    .product-filter-spinner {
        animation-duration:
            1.5s;
    }

}


/* ============================================================
   END OF ULTRA PREMIUM PRODUCT FILTER SYSTEM
   ============================================================ */
```