/** Shopify CDN: Minification failed

Line 38:3 Unexpected "<"

**/
/* =========================================================
   HM-FILTERS:CSS
   Huismerken.nl gedeelde filter-styling

   Dit bestand bevat straks alle styling voor:
   - collectie desktop-filter
   - collectie mobiel-filter
   - zoekpagina desktop-filter
   - zoekpagina mobiel-filter
   - prijs-slider
   - kleurfilters
   - sticky filterbalken
   - mobile drawers

   Snel zoeken:
   HM-FILTERS:COLLECTION-DESKTOP-CSS
   HM-FILTERS:COLLECTION-MOBILE-CSS
   HM-FILTERS:SEARCH-DESKTOP-CSS
   HM-FILTERS:SEARCH-MOBILE-CSS
   HM-FILTERS:COLOR-CSS
   HM-FILTERS:PRICE-SLIDER-CSS

   Richtlijn:
   - Geen Liquid in dit bestand.
   - Geen JavaScript in dit bestand.
   - Alleen styling.
   ========================================================= */

   /* =========================================================
   HM-FILTERS:COLLECTION
   Styling voor collectie desktop + mobiel
   ========================================================= */
   <style>
  @media screen and (max-width: 749px) {
    .hm-desktop-filter-wrap {
      display: none !important;
    }
  }

  @media screen and (min-width: 750px) {
    .hm-desktop-filter-wrap {
      position: fixed !important;
      left: 50% !important;
      bottom: 18px !important;
      transform: translateX(-50%) !important;

      width: calc(100vw - 36px) !important;
      max-width: 1360px !important;
      margin: 0 !important;
      padding: 10px 12px 10px 168px !important;

      background: #ffffff !important;
      border: 1.5px solid #2255a4 !important;
      border-radius: 20px !important;

      box-shadow:
        0 16px 38px rgba(17, 24, 39, 0.20),
        0 0 0 5px rgba(34, 85, 164, 0.07) !important;

      z-index: 9999 !important;
      overflow: visible !important;
    }

    .hm-desktop-filter-wrap::before {
      content: "Slim filteren";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;

      width: 150px;
      display: flex;
      align-items: center;
      justify-content: center;

      background: #ffcf26;
      color: #2255a4;
      border-right: 1.5px solid rgba(34, 85, 164, 0.20);
      border-radius: 18px 0 0 18px;

      font-size: 17px;
      font-weight: 900;
      line-height: 1.05;
      letter-spacing: -0.25px;
    }

    body.collection-template {
      padding-bottom: 145px !important;
    }
  }

  .hm-desktop-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
  }

  .hm-desktop-filter-message {
    flex: 0 0 285px;
    min-width: 285px;
    max-width: 285px;

    display: flex;
    flex-direction: column;
    gap: 3px;

    padding: 10px 12px;
    border-radius: 14px;

    background: #2255a4;
    border: 1px solid #2255a4;
    color: #ffffff;

    box-shadow: 0 6px 16px rgba(34, 85, 164, 0.18);
    line-height: 1.25;
  }

  .hm-desktop-filter-message strong {
    display: inline-flex;
    width: fit-content;
    align-items: center;

    padding: 5px 9px;
    border-radius: 999px;

    background: #ffcf26;
    color: #111827;

    font-size: 13px;
    font-weight: 900;
    line-height: 1;
  }

  .hm-desktop-filter-message span {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
  }

  .hm-desktop-filter-groups {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
  }

  .hm-filter-dropdown {
    position: relative;
    min-width: max-content;
  }

  .hm-filter-dropdown__summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 40px;
    padding: 10px 14px;

    border: 1.5px solid rgba(34, 85, 164, 0.35);
    border-radius: 999px;
    background: #ffffff;
    color: #2255a4;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    list-style: none;
    cursor: pointer;

    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }

  .hm-filter-dropdown__summary::-webkit-details-marker {
    display: none;
  }

  .hm-filter-dropdown__summary:hover {
    transform: translateY(-1px);
    background: #f4f8ff;
    border-color: #2255a4;
  }

  .hm-filter-dropdown[open] .hm-filter-dropdown__summary {
    background: #2255a4;
    border-color: #2255a4;
    color: #ffffff;
  }

  .hm-filter-dropdown__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 15px;
    height: 15px;
    padding: 0 5px;
    border-radius: 999px;

    background: #ffcf26;
    color: #111827;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;
  }

  .hm-filter-dropdown__chevron {
    color: inherit;
    font-weight: 700;
    transform: translateY(-1px);
  }

  .hm-filter-dropdown__panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);

    width: min(320px, 88vw);
    max-height: min(430px, calc(100vh - 190px));

    display: flex;
    flex-direction: column;

    padding: 0;
    border: 1px solid rgba(17, 24, 39, 0.10);
    border-radius: 12px;

    background: #ffffff;
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.14);

    overflow: hidden;
    z-index: 12000;
  }

  .hm-filter-dropdown__panel--color {
    width: min(360px, 88vw);
  }

  .hm-filter-scrollhint {
    flex: 0 0 auto;

    padding: 9px 11px 7px;

    background: #ffffff;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);

    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
  }

  .hm-filter-options {
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;
    gap: 8px;

    max-height: 295px;
    padding: 10px 10px 12px;

    overflow-y: auto;
    overscroll-behavior: contain;

    scrollbar-width: thin;
    scrollbar-color: rgba(34, 85, 164, 0.45) #f3f4f6;
  }

  .hm-filter-options::-webkit-scrollbar {
    width: 8px;
  }

  .hm-filter-options::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 999px;
  }

  .hm-filter-options::-webkit-scrollbar-thumb {
    background: rgba(34, 85, 164, 0.45);
    border-radius: 999px;
  }

  .hm-filter-options--color {
    gap: 7px !important;
  }

  .hm-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #111827;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
  }

  .hm-filter-option input {
    width: 16px;
    height: 16px;
    margin: 0;
  }

  .hm-filter-option span {
    flex: 1;
    min-width: 0;
  }

  .hm-filter-option em {
    color: #6b7280;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
  }

  .hm-filter-option--disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .hm-filter-option--color {
    position: relative !important;

    min-height: 38px !important;
    padding: 8px 10px 8px 40px !important;

    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    background: #ffffff !important;
    color: #111827 !important;

    border: 1px solid rgba(17, 24, 39, 0.12) !important;
    border-radius: 10px !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    box-shadow: none !important;
    overflow: hidden !important;
  }

  .hm-filter-option--color::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);

    width: 18px;
    height: 18px;

    border-radius: 5px;
    background: var(--hm-swatch, #e5e7eb);
    border: 1px solid var(--hm-swatch-border, rgba(17, 24, 39, 0.18));

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }

  .hm-filter-option--color input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .hm-filter-option--color span {
    color: #111827 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
  }

  .hm-filter-option--color em {
    margin-left: auto !important;

    min-width: 25px !important;
    padding: 2px 7px !important;

    border-radius: 999px !important;
    background: #f3f4f6 !important;
    color: #6b7280 !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .hm-filter-option--color:hover {
    transform: none !important;
    border-color: rgba(34, 85, 164, 0.35) !important;
    background: #f8fafc !important;
    box-shadow: none !important;
  }

  .hm-filter-option--color:has(input:checked) {
    border-color: #2255a4 !important;
    background: #f4f8ff !important;
    box-shadow: 0 0 0 2px rgba(34, 85, 164, 0.12) !important;
  }

  .hm-filter-option--color:has(input:checked) span::before {
    content: "✓ ";
    color: #2255a4;
    font-weight: 950;
  }

  .hm-kleur-zwart { --hm-swatch:#111827; --hm-swatch-border:#111827; }
  .hm-kleur-antraciet { --hm-swatch:#374151; --hm-swatch-border:#374151; }

  .hm-kleur-wit,
  .hm-kleur-white,
  .hm-kleur-hoogglans-wit {
    --hm-swatch:#ffffff;
    --hm-swatch-border:rgba(34,85,164,.35);
  }

  .hm-kleur-beige { --hm-swatch:#d8c3a5; --hm-swatch-border:rgba(120,91,58,.28); }
  .hm-kleur-creme { --hm-swatch:#f3e7c9; --hm-swatch-border:rgba(120,91,58,.22); }
  .hm-kleur-bruin { --hm-swatch:#8b5e3c; --hm-swatch-border:#8b5e3c; }
  .hm-kleur-grijs { --hm-swatch:#9ca3af; --hm-swatch-border:#9ca3af; }

  .hm-kleur-blauw,
  .hm-kleur-blue {
    --hm-swatch:#2255a4;
    --hm-swatch-border:#2255a4;
  }

  .hm-kleur-groen,
  .hm-kleur-green {
    --hm-swatch:#2f7d46;
    --hm-swatch-border:#2f7d46;
  }

  .hm-kleur-rood,
  .hm-kleur-red {
    --hm-swatch:#c0392b;
    --hm-swatch-border:#c0392b;
  }

  .hm-kleur-geel { --hm-swatch:#ffcf26; --hm-swatch-border:rgba(17,24,39,.2); }
  .hm-kleur-goud { --hm-swatch:#d4af37; --hm-swatch-border:rgba(120,91,20,.34); }
  .hm-kleur-zilver { --hm-swatch:#c0c7d1; --hm-swatch-border:rgba(17,24,39,.2); }
  .hm-kleur-oranje { --hm-swatch:#f97316; --hm-swatch-border:#f97316; }
  .hm-kleur-paars { --hm-swatch:#7c3aed; --hm-swatch-border:#7c3aed; }
  .hm-kleur-roze { --hm-swatch:#f9a8d4; --hm-swatch-border:rgba(190,24,93,.28); }
  .hm-kleur-taupe { --hm-swatch:#9f8f86; --hm-swatch-border:#9f8f86; }
  .hm-kleur-turquoise { --hm-swatch:#2dd4bf; --hm-swatch-border:#2dd4bf; }
  .hm-kleur-naturel { --hm-swatch:#c9a46a; --hm-swatch-border:rgba(120,91,58,.32); }

  .hm-kleur-koudwit,
  .hm-kleur-cold-white {
    --hm-swatch:#f4fbff;
    --hm-swatch-border:rgba(34,85,164,.25);
  }

  .hm-kleur-warmwit,
  .hm-kleur-warm-white {
    --hm-swatch:#fff3c4;
    --hm-swatch-border:rgba(217,119,6,.28);
  }

  .hm-kleur-wit-en-grijs,
  .hm-kleur-white-and-grey {
    --hm-swatch:linear-gradient(135deg,#fff 0 50%,#9ca3af 50% 100%);
    --hm-swatch-border:rgba(17,24,39,.24);
  }

  .hm-kleur-wit-en-blauw,
  .hm-kleur-white-and-blue {
    --hm-swatch:linear-gradient(135deg,#fff 0 50%,#2255a4 50% 100%);
    --hm-swatch-border:rgba(34,85,164,.35);
  }

  .hm-kleur-zwart-en-rood {
    --hm-swatch:linear-gradient(135deg,#111827 0 50%,#c0392b 50% 100%);
    --hm-swatch-border:rgba(17,24,39,.35);
  }

  .hm-kleur-warmwit-en-donkergroen {
    --hm-swatch:linear-gradient(135deg,#fff3c4 0 50%,#14532d 50% 100%);
    --hm-swatch-border:rgba(20,83,45,.35);
  }

  .hm-kleur-gold-and-bronze {
    --hm-swatch:linear-gradient(135deg,#d4af37 0 50%,#8b5a2b 50% 100%);
    --hm-swatch-border:rgba(139,90,43,.35);
  }

  .hm-kleur-multikleur,
  .hm-kleur-multicolour,
  .hm-kleur-colourful,
  .hm-kleur-colorful,
  .hm-kleur-kleurrijk {
    --hm-swatch:linear-gradient(135deg,#ef4444 0 20%,#f59e0b 20% 40%,#22c55e 40% 60%,#2255a4 60% 80%,#a855f7 80% 100%);
    --hm-swatch-border:rgba(17,24,39,.28);
  }

  .hm-kleur-transparent {
    --hm-swatch:repeating-conic-gradient(#fff 0% 25%,#e5e7eb 0% 50%) 50% / 10px 10px;
    --hm-swatch-border:rgba(17,24,39,.24);
  }

  .hm-price-slider {
    flex: 1 1 auto;
    padding: 10px;
    overflow: visible;
  }

  .hm-price-slider__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    color: #111827;
  }

  .hm-price-slider__top span {
    font-size: 13px;
    font-weight: 700;
  }

  .hm-price-slider__top strong {
    color: #2255a4;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
  }

  .hm-price-slider__range-wrap {
    position: relative;
    height: 34px;
    margin: 2px 2px 10px;
    --hm-range-left: 0%;
    --hm-range-right: 0%;
  }

  .hm-price-slider__range-wrap::before,
  .hm-price-slider__range-wrap::after {
    content: "";
    position: absolute;
    top: 15px;
    height: 5px;
    border-radius: 999px;
  }

  .hm-price-slider__range-wrap::before {
    left: 0;
    right: 0;
    background: #e5e7eb;
  }

  .hm-price-slider__range-wrap::after {
    left: var(--hm-range-left);
    right: var(--hm-range-right);
    background: #2255a4;
  }

  .hm-price-slider__range {
    position: absolute;
    left: 0;
    top: 6px;
    width: 100%;
    height: 24px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    pointer-events: none;
    z-index: 2;
  }

  .hm-price-slider__range::-webkit-slider-runnable-track {
    height: 5px;
    background: transparent;
  }

  .hm-price-slider__range::-moz-range-track {
    height: 5px;
    background: transparent;
  }

  .hm-price-slider__range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 20px;
    height: 20px;
    margin-top: -7px;

    border-radius: 50%;
    background: #ffcf26;
    border: 2px solid #2255a4;

    cursor: pointer;
    pointer-events: auto;

    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.16);
  }

  .hm-price-slider__range::-moz-range-thumb {
    width: 20px;
    height: 20px;

    border-radius: 50%;
    background: #ffcf26;
    border: 2px solid #2255a4;

    cursor: pointer;
    pointer-events: auto;

    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.16);
  }

  .hm-price-slider__inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .hm-price-slider__inputs label {
    display: flex;
    flex-direction: column;
    gap: 5px;

    color: #374151;
    font-size: 12px;
    font-weight: 600;
  }

  .hm-price-slider__inputs label > div {
    position: relative;
  }

  .hm-price-slider__inputs em {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);

    color: #6b7280;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;

    pointer-events: none;
  }

  .hm-price-slider__inputs input {
    width: 100%;
    min-height: 38px;

    padding: 8px 10px 8px 24px;
    border: 1px solid rgba(17, 24, 39, 0.16);
    border-radius: 10px;

    color: #111827;
    font-size: 14px;
    font-weight: 600;
  }

  .hm-filter-apply {
    flex: 0 0 auto;

    width: 100%;
    margin: 0;
    padding: 13px 14px;

    border: 0;
    border-radius: 0 0 12px 12px;

    background: #2255a4;
    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
    box-shadow: 0 -10px 18px rgba(17, 24, 39, 0.08);
  }

  .hm-filter-apply:hover {
    background: #174783;
  }

  .hm-filter-sort {
    display: flex;
    align-items: center;
    gap: 5px;

    min-width: max-content;
    margin-left: auto;
    padding: 8px 10px;

    border: 1.5px solid rgba(34, 85, 164, 0.22);
    border-radius: 11px;

    background: #f8fafc;
    color: #374151;

    font-size: 12px;
    font-weight: 500;
  }

  .hm-filter-sort label {
    color: #2255a4;
    font-size: 12px;
    font-weight: 800;
  }

  .hm-filter-sort select {
    width: 190px;
    max-width: 190px;
    min-height: 38px;

    padding: 6px 28px 6px 9px;
    border: 1px solid rgba(17, 24, 39, 0.14);
    border-radius: 10px;

    background: #ffffff;
    color: #111827;

    font-size: 13px;
    font-weight: 700;
  }

  .hm-filter-bar-apply {
    min-height: 40px;
    padding: 0 14px;

    border: 0;
    border-radius: 999px;

    background: #2255a4;
    color: #ffffff;

    font-size: 12px;
    font-weight: 900;

    cursor: pointer;
    white-space: nowrap;
  }

  .hm-filter-bar-apply:hover {
    background: #174783;
  }

  .hm-filter-clear {
    min-width: max-content;
    padding: 11px 13px;
    border-radius: 999px;

    background: #fff3b0;
    color: #111827;

    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }

  .hm-filter-clear:hover {
    background: #ffcf26;
  }

  .hm-active-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;

    margin-top: 8px;
    padding: 0;

    overflow-x: auto;
    scrollbar-width: none;
  }

  .hm-active-filters::-webkit-scrollbar {
    display: none;
  }

  .hm-active-filter {
    display: inline-flex;
    align-items: center;

    padding: 5px 8px;
    border-radius: 999px;

    background: #2255a4;
    color: #ffffff;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;

    box-shadow: 0 2px 8px rgba(34, 85, 164, 0.14);
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .hm-desktop-filter-wrap {
      padding-left: 132px !important;
    }

    .hm-desktop-filter-wrap::before {
      width: 116px !important;
      font-size: 14px !important;
    }

    .hm-desktop-filter-message {
      flex: 0 0 225px !important;
      min-width: 225px !important;
      max-width: 225px !important;
    }

    .hm-filter-sort select {
      width: 145px !important;
      max-width: 145px !important;
    }

    .hm-filter-bar-apply {
      padding-inline: 11px !important;
    }
  }
/* Desktop: actieve filterchips verbergen voor meer rust */
@media screen and (min-width: 750px) {
  .hm-active-filters,
  .hm-search-active-filters {
    display: none !important;
  }

  .hm-desktop-filter-wrap,
  .hm-search-desktop-filter-wrap {
    padding-bottom: 10px !important;
  }
}
  @media screen and (min-width: 750px) {
    .hm-mobile-filter-toggle,
    .hm-mobile-filter-bar,
    .hm-mobile-filter-mini,
    .hm-mobile-filter-overlay,
    .hm-mobile-filter-drawer {
      display: none !important;
    }
  }

  @media screen and (max-width: 749px) {
    .hm-mobile-filter-toggle {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .hm-mobile-filter-bar {
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 999;
      display: grid;
      grid-template-columns: 44px 1fr;
      align-items: center;
      gap: 8px;
      background: transparent;
      box-sizing: border-box;
    }

    .hm-mobile-filter-bar.hm-is-hidden {
      display: none;
    }

    .hm-mobile-filter-hide,
    .hm-mobile-filter-mini__expand {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      color: #2255a4;
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(17, 24, 39, 0.16);
    }

    .hm-mobile-filter-hide {
      font-size: 22px;
    }

    .hm-mobile-filter-button {
      min-height: 62px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 4px;
      padding: 11px 16px;
      border-radius: 18px;
      background: #2255a4;
      color: #ffffff;
      cursor: pointer;
      box-sizing: border-box;
      box-shadow: 0 8px 28px rgba(17, 24, 39, 0.22);
    }

    .hm-mobile-filter-button__main {
      display: block;
      color: #ffffff;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.1;
      text-align: left;
    }

    .hm-mobile-filter-button__sub {
      display: block;
      color: rgba(255, 255, 255, 0.82);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.3;
      text-align: left;
    }

    .hm-mobile-filter-mini {
      position: fixed;
      left: 12px;
      bottom: 12px;
      z-index: 999;
      display: none;
      align-items: center;
      gap: 6px;
    }

    .hm-mobile-filter-mini.hm-is-visible {
      display: flex;
    }

    .hm-mobile-filter-mini__button {
      min-height: 52px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 13px;
      border-radius: 999px;
      background: #2255a4;
      color: #ffffff;
      cursor: pointer;
      box-shadow: 0 8px 28px rgba(17, 24, 39, 0.22);
    }

    .hm-mobile-filter-mini__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
    }

    .hm-mobile-filter-mini__count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 23px;
      padding: 0 7px;
      border-radius: 999px;
      background: #ffcf26;
      color: #111827;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
    }

    .hm-mobile-filter-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(17, 24, 39, 0.38);
    }

    .hm-mobile-filter-drawer {
      display: none;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1001;
      max-height: 86vh;
      overflow: auto;
      border-radius: 22px 22px 0 0;
      background: #ffffff;
      box-shadow: 0 -10px 30px rgba(17, 24, 39, 0.22);
    }

    .hm-mobile-filter-toggle:checked ~ .hm-mobile-filter-overlay,
    .hm-mobile-filter-toggle:checked ~ .hm-mobile-filter-drawer {
      display: block;
    }

    .hm-mobile-filter-form {
      padding: 16px 16px 90px;
    }

    .hm-mobile-filter-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .hm-mobile-filter-head strong {
      display: block;
      color: #111827;
      font-size: 18px;
      font-weight: 800;
      line-height: 1.2;
    }

    .hm-mobile-filter-head span {
      display: block;
      margin-top: 3px;
      color: #6b7280;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.35;
    }

    .hm-mobile-filter-close {
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #f3f4f6;
      color: #111827;
      font-size: 24px;
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
    }

    .hm-mobile-sort {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 12px;
    }

    .hm-mobile-sort label {
      color: #374151;
      font-size: 13px;
      font-weight: 700;
    }

    .hm-mobile-sort select {
      min-height: 42px;
      padding: 8px 30px 8px 10px;
      border: 1px solid rgba(17, 24, 39, 0.14);
      border-radius: 10px;
      background: #ffffff;
      color: #111827;
      font-size: 14px;
      font-weight: 600;
    }

    .hm-mobile-filter-group {
      border-top: 1px solid rgba(17, 24, 39, 0.08);
      padding: 12px 0;
    }

    .hm-mobile-filter-group summary {
      color: #111827;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
    }

    .hm-mobile-filter-options,
    .hm-mobile-price-slider {
      margin-top: 10px;
    }

    .hm-mobile-filter-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .hm-mobile-filter-option {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #111827;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.25;
      cursor: pointer;
    }

    .hm-mobile-filter-option input {
      width: 16px;
      height: 16px;
      margin: 0;
    }

    .hm-mobile-filter-option span {
      flex: 1;
      min-width: 0;
    }

    .hm-mobile-filter-option em {
      color: #6b7280;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
    }

    .hm-mobile-filter-option--disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .hm-mobile-filter-options--color {
      gap: 7px !important;
    }

    .hm-mobile-filter-option--color {
      position: relative !important;
      min-height: 38px !important;
      padding: 8px 10px 8px 40px !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      background: #ffffff !important;
      color: #111827 !important;
      border: 1px solid rgba(17, 24, 39, 0.12) !important;
      border-radius: 10px !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      line-height: 1.2 !important;
      box-shadow: none !important;
      overflow: hidden !important;
    }

    .hm-mobile-filter-option--color::before {
      content: "";
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      border-radius: 5px;
      background: var(--hm-swatch, #e5e7eb);
      border: 1px solid var(--hm-swatch-border, rgba(17, 24, 39, 0.18));
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    }

    .hm-mobile-filter-option--color input {
      position: absolute !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .hm-mobile-filter-option--color span {
      color: #111827 !important;
      font-weight: 700 !important;
      text-shadow: none !important;
    }

    .hm-mobile-filter-option--color em {
      margin-left: auto !important;
      min-width: 25px !important;
      padding: 2px 7px !important;
      border-radius: 999px !important;
      background: #f3f4f6 !important;
      color: #6b7280 !important;
      font-size: 10px !important;
      font-weight: 800 !important;
      text-align: center !important;
    }

    .hm-mobile-filter-option--color:hover {
      border-color: rgba(34, 85, 164, 0.35) !important;
      background: #f8fafc !important;
      box-shadow: none !important;
    }

    .hm-mobile-filter-option--color:has(input:checked) {
      border-color: #2255a4 !important;
      background: #f4f8ff !important;
      box-shadow: 0 0 0 2px rgba(34, 85, 164, 0.12) !important;
    }

    .hm-mobile-filter-option--color:has(input:checked) span::before {
      content: "✓ ";
      color: #2255a4;
      font-weight: 950;
    }

    .hm-kleur-zwart { --hm-swatch:#111827; --hm-swatch-border:#111827; }
    .hm-kleur-antraciet { --hm-swatch:#374151; --hm-swatch-border:#374151; }
    .hm-kleur-wit,
    .hm-kleur-white,
    .hm-kleur-hoogglans-wit { --hm-swatch:#ffffff; --hm-swatch-border:rgba(34,85,164,.35); }
    .hm-kleur-beige { --hm-swatch:#d8c3a5; --hm-swatch-border:rgba(120,91,58,.28); }
    .hm-kleur-creme { --hm-swatch:#f3e7c9; --hm-swatch-border:rgba(120,91,58,.22); }
    .hm-kleur-bruin { --hm-swatch:#8b5e3c; --hm-swatch-border:#8b5e3c; }
    .hm-kleur-grijs { --hm-swatch:#9ca3af; --hm-swatch-border:#9ca3af; }
    .hm-kleur-blauw,
    .hm-kleur-blue { --hm-swatch:#2255a4; --hm-swatch-border:#2255a4; }
    .hm-kleur-groen,
    .hm-kleur-green { --hm-swatch:#2f7d46; --hm-swatch-border:#2f7d46; }
    .hm-kleur-rood,
    .hm-kleur-red { --hm-swatch:#c0392b; --hm-swatch-border:#c0392b; }
    .hm-kleur-geel { --hm-swatch:#ffcf26; --hm-swatch-border:rgba(17,24,39,.2); }
    .hm-kleur-goud { --hm-swatch:#d4af37; --hm-swatch-border:rgba(120,91,20,.34); }
    .hm-kleur-zilver { --hm-swatch:#c0c7d1; --hm-swatch-border:rgba(17,24,39,.2); }
    .hm-kleur-oranje { --hm-swatch:#f97316; --hm-swatch-border:#f97316; }
    .hm-kleur-paars { --hm-swatch:#7c3aed; --hm-swatch-border:#7c3aed; }
    .hm-kleur-roze { --hm-swatch:#f9a8d4; --hm-swatch-border:rgba(190,24,93,.28); }
    .hm-kleur-taupe { --hm-swatch:#9f8f86; --hm-swatch-border:#9f8f86; }
    .hm-kleur-turquoise { --hm-swatch:#2dd4bf; --hm-swatch-border:#2dd4bf; }
    .hm-kleur-naturel { --hm-swatch:#c9a46a; --hm-swatch-border:rgba(120,91,58,.32); }
    .hm-kleur-koudwit,
    .hm-kleur-cold-white { --hm-swatch:#f4fbff; --hm-swatch-border:rgba(34,85,164,.25); }
    .hm-kleur-warmwit,
    .hm-kleur-warm-white { --hm-swatch:#fff3c4; --hm-swatch-border:rgba(217,119,6,.28); }
    .hm-kleur-wit-en-grijs,
    .hm-kleur-white-and-grey { --hm-swatch:linear-gradient(135deg,#fff 0 50%,#9ca3af 50% 100%); --hm-swatch-border:rgba(17,24,39,.24); }
    .hm-kleur-wit-en-blauw,
    .hm-kleur-white-and-blue { --hm-swatch:linear-gradient(135deg,#fff 0 50%,#2255a4 50% 100%); --hm-swatch-border:rgba(34,85,164,.35); }
    .hm-kleur-zwart-en-rood { --hm-swatch:linear-gradient(135deg,#111827 0 50%,#c0392b 50% 100%); --hm-swatch-border:rgba(17,24,39,.35); }
    .hm-kleur-warmwit-en-donkergroen { --hm-swatch:linear-gradient(135deg,#fff3c4 0 50%,#14532d 50% 100%); --hm-swatch-border:rgba(20,83,45,.35); }
    .hm-kleur-gold-and-bronze { --hm-swatch:linear-gradient(135deg,#d4af37 0 50%,#8b5a2b 50% 100%); --hm-swatch-border:rgba(139,90,43,.35); }
    .hm-kleur-multikleur,
    .hm-kleur-multicolour,
    .hm-kleur-colourful,
    .hm-kleur-colorful,
    .hm-kleur-kleurrijk { --hm-swatch:linear-gradient(135deg,#ef4444 0 20%,#f59e0b 20% 40%,#22c55e 40% 60%,#2255a4 60% 80%,#a855f7 80% 100%); --hm-swatch-border:rgba(17,24,39,.28); }
    .hm-kleur-transparent { --hm-swatch:repeating-conic-gradient(#fff 0% 25%,#e5e7eb 0% 50%) 50% / 10px 10px; --hm-swatch-border:rgba(17,24,39,.24); }

    .hm-mobile-price-slider__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
      color: #111827;
    }

    .hm-mobile-price-slider__top span {
      font-size: 13px;
      font-weight: 700;
    }

    .hm-mobile-price-slider__top strong {
      color: #2255a4;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
    }

    .hm-mobile-price-slider__range-wrap {
      position: relative;
      height: 34px;
      margin: 2px 2px 10px;
      --hm-range-left: 0%;
      --hm-range-right: 0%;
    }

    .hm-mobile-price-slider__range-wrap::before,
    .hm-mobile-price-slider__range-wrap::after {
      content: "";
      position: absolute;
      top: 15px;
      height: 5px;
      border-radius: 999px;
    }

    .hm-mobile-price-slider__range-wrap::before {
      left: 0;
      right: 0;
      background: #e5e7eb;
    }

    .hm-mobile-price-slider__range-wrap::after {
      left: var(--hm-range-left);
      right: var(--hm-range-right);
      background: #2255a4;
    }

    .hm-mobile-price-slider__range {
      position: absolute;
      left: 0;
      top: 6px;
      width: 100%;
      height: 24px;
      margin: 0;
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      pointer-events: none;
      z-index: 2;
    }

    .hm-mobile-price-slider__range::-webkit-slider-runnable-track {
      height: 5px;
      background: transparent;
    }

    .hm-mobile-price-slider__range::-moz-range-track {
      height: 5px;
      background: transparent;
    }

    .hm-mobile-price-slider__range::-webkit-slider-thumb {
      appearance: none;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      margin-top: -7px;
      border-radius: 50%;
      background: #ffcf26;
      border: 2px solid #2255a4;
      cursor: pointer;
      pointer-events: auto;
      box-shadow: 0 2px 8px rgba(17, 24, 39, 0.16);
    }

    .hm-mobile-price-slider__range::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ffcf26;
      border: 2px solid #2255a4;
      cursor: pointer;
      pointer-events: auto;
      box-shadow: 0 2px 8px rgba(17, 24, 39, 0.16);
    }

    .hm-mobile-price-slider__inputs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .hm-mobile-price-slider__inputs label {
      display: flex;
      flex-direction: column;
      gap: 5px;
      color: #374151;
      font-size: 12px;
      font-weight: 600;
    }

    .hm-mobile-price-slider__inputs label > div {
      position: relative;
    }

    .hm-mobile-price-slider__inputs em {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: #6b7280;
      font-size: 13px;
      font-style: normal;
      font-weight: 500;
      pointer-events: none;
    }

    .hm-mobile-price-slider__inputs input {
      width: 100%;
      min-height: 38px;
      padding: 8px 10px 8px 24px;
      border: 1px solid rgba(17, 24, 39, 0.16);
      border-radius: 10px;
      color: #111827;
      font-size: 14px;
      font-weight: 600;
    }

    .hm-mobile-filter-actions {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1002;
      display: flex;
      gap: 8px;
      padding: 10px 16px 14px;
      background: #ffffff;
      box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.08);
    }

    .hm-mobile-clear {
      min-height: 46px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: #f3f4f6;
      color: #111827;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
    }

    .hm-mobile-apply {
      flex: 1;
      min-height: 46px;
      padding: 0 14px;
      border: 0;
      border-radius: 12px;
      background: #2255a4;
      color: #ffffff;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
    }

    .hm-mobile-filter-form.hm-is-calculating {
      opacity: 0.72;
      pointer-events: none;
    }

    .hm-mobile-filter-form.hm-is-calculating button[type="submit"] {
      background: #174783 !important;
      cursor: wait !important;
    }
  }

  @media screen and (max-width: 374px) {
    .hm-mobile-filter-bar {
      grid-template-columns: 40px 1fr;
      gap: 7px;
      left: 10px;
      right: 10px;
      bottom: 10px;
    }

    .hm-mobile-filter-hide,
    .hm-mobile-filter-mini__expand {
      width: 40px;
      height: 40px;
      min-width: 40px;
      min-height: 40px;
    }

    .hm-mobile-filter-button {
      min-height: 58px;
      padding: 10px 13px;
      border-radius: 16px;
    }

    .hm-mobile-filter-button__main {
      font-size: 14px;
    }

    .hm-mobile-filter-button__sub {
      font-size: 11px;
    }
  }

  @media screen and (min-width: 750px) {
    .hm-search-mobile-filter-toggle,
    .hm-search-mobile-filter-bar,
    .hm-search-mobile-filter-mini,
    .hm-search-mobile-filter-overlay,
    .hm-search-mobile-filter-drawer {
      display: none !important;
    }
  }

  @media screen and (max-width: 749px) {
    .hm-search-mobile-filter-toggle {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .hm-search-mobile-filter-bar {
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 999;
      display: grid;
      grid-template-columns: 44px 1fr;
      align-items: center;
      gap: 8px;
      background: transparent;
      box-sizing: border-box;
    }

    .hm-search-mobile-filter-bar.hm-is-hidden {
      display: none;
    }

    .hm-search-mobile-filter-hide,
    .hm-search-mobile-filter-mini__expand {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      color: #2255a4;
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(17,24,39,.16);
    }

    .hm-search-mobile-filter-button {
      min-height: 62px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 4px;
      padding: 11px 16px;
      border-radius: 18px;
      background: #2255a4;
      color: #ffffff;
      cursor: pointer;
      box-sizing: border-box;
      box-shadow: 0 8px 28px rgba(17,24,39,.22);
    }

    .hm-search-mobile-filter-button__main {
      display: block;
      color: #ffffff;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.1;
      text-align: left;
    }

    .hm-search-mobile-filter-button__sub {
      display: block;
      color: rgba(255,255,255,.82);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.3;
      text-align: left;
    }

    .hm-search-mobile-filter-mini {
      position: fixed;
      left: 12px;
      bottom: 12px;
      z-index: 999;
      display: none;
      align-items: center;
      gap: 6px;
    }

    .hm-search-mobile-filter-mini.hm-is-visible {
      display: flex;
    }

    .hm-search-mobile-filter-mini__button {
      min-height: 52px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 13px;
      border-radius: 999px;
      background: #2255a4;
      color: #ffffff;
      cursor: pointer;
      box-shadow: 0 8px 28px rgba(17,24,39,.22);
    }

    .hm-search-mobile-filter-mini__count {
      min-width: 28px;
      height: 23px;
      padding: 0 7px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ffcf26;
      color: #111827;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
    }

    .hm-search-mobile-filter-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(17,24,39,.38);
    }

    .hm-search-mobile-filter-drawer {
      display: none;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1001;
      max-height: 86vh;
      overflow: auto;
      border-radius: 22px 22px 0 0;
      background: #ffffff;
      box-shadow: 0 -10px 30px rgba(17,24,39,.22);
    }

    .hm-search-mobile-filter-toggle:checked ~ .hm-search-mobile-filter-overlay,
    .hm-search-mobile-filter-toggle:checked ~ .hm-search-mobile-filter-drawer {
      display: block;
    }

    .hm-search-mobile-filter-form {
      padding: 16px 16px 90px;
    }

    .hm-search-mobile-filter-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .hm-search-mobile-filter-head strong {
      display: block;
      color: #111827;
      font-size: 18px;
      font-weight: 800;
      line-height: 1.2;
    }

    .hm-search-mobile-filter-head span {
      display: block;
      margin-top: 3px;
      color: #6b7280;
      font-size: 13px;
      line-height: 1.35;
    }

    .hm-search-mobile-filter-close {
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #f3f4f6;
      color: #111827;
      font-size: 24px;
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
    }

    .hm-search-mobile-sort {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 12px;
    }

    .hm-search-mobile-sort label {
      color: #374151;
      font-size: 13px;
      font-weight: 700;
    }

    .hm-search-mobile-sort select {
      min-height: 42px;
      padding: 8px 30px 8px 10px;
      border: 1px solid rgba(17,24,39,.14);
      border-radius: 10px;
      background: #ffffff;
      color: #111827;
      font-size: 14px;
      font-weight: 600;
    }

    .hm-search-mobile-filter-group {
      border-top: 1px solid rgba(17,24,39,.08);
      padding: 12px 0;
    }

    .hm-search-mobile-filter-group summary {
      color: #111827;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
    }

    .hm-search-mobile-filter-options,
    .hm-search-mobile-price-slider {
      margin-top: 10px;
    }

    .hm-search-mobile-filter-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .hm-search-mobile-filter-option {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #111827;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.25;
      cursor: pointer;
    }

    .hm-search-mobile-filter-option input {
      width: 16px;
      height: 16px;
      margin: 0;
    }

    .hm-search-mobile-filter-option span {
      flex: 1;
      min-width: 0;
    }

    .hm-search-mobile-filter-option em {
      color: #6b7280;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
    }

    .hm-search-mobile-filter-option--disabled {
      opacity: .45;
      cursor: not-allowed;
    }

    .hm-search-mobile-filter-options--color {
      gap: 7px !important;
    }

    .hm-search-mobile-filter-option--color {
      position: relative !important;
      min-height: 38px !important;
      padding: 8px 10px 8px 40px !important;
      background: #ffffff !important;
      color: #111827 !important;
      border: 1px solid rgba(17,24,39,.12) !important;
      border-radius: 10px !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      box-shadow: none !important;
    }

    .hm-search-mobile-filter-option--color::before {
      content: "";
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      border-radius: 5px;
      background: var(--hm-swatch, #e5e7eb);
      border: 1px solid var(--hm-swatch-border, rgba(17,24,39,.18));
    }

    .hm-search-mobile-filter-option--color input {
      position: absolute !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .hm-search-mobile-filter-option--color span {
      color: #111827 !important;
      font-weight: 700 !important;
    }

    .hm-search-mobile-filter-option--color em {
      margin-left: auto !important;
      min-width: 25px !important;
      padding: 2px 7px !important;
      border-radius: 999px !important;
      background: #f3f4f6 !important;
      color: #6b7280 !important;
      font-size: 10px !important;
      font-weight: 800 !important;
      text-align: center !important;
    }

    .hm-search-mobile-filter-option--color:has(input:checked) {
      border-color: #2255a4 !important;
      background: #f4f8ff !important;
      box-shadow: 0 0 0 2px rgba(34,85,164,.12) !important;
    }

    .hm-search-mobile-filter-option--color:has(input:checked) span::before {
      content: "✓ ";
      color: #2255a4;
      font-weight: 950;
    }

    .hm-kleur-zwart { --hm-swatch:#111827; --hm-swatch-border:#111827; }
    .hm-kleur-antraciet { --hm-swatch:#374151; --hm-swatch-border:#374151; }
    .hm-kleur-wit,
    .hm-kleur-white,
    .hm-kleur-hoogglans-wit { --hm-swatch:#ffffff; --hm-swatch-border:rgba(34,85,164,.35); }
    .hm-kleur-beige { --hm-swatch:#d8c3a5; --hm-swatch-border:rgba(120,91,58,.28); }
    .hm-kleur-creme { --hm-swatch:#f3e7c9; --hm-swatch-border:rgba(120,91,58,.22); }
    .hm-kleur-bruin { --hm-swatch:#8b5e3c; --hm-swatch-border:#8b5e3c; }
    .hm-kleur-grijs { --hm-swatch:#9ca3af; --hm-swatch-border:#9ca3af; }
    .hm-kleur-blauw,
    .hm-kleur-blue { --hm-swatch:#2255a4; --hm-swatch-border:#2255a4; }
    .hm-kleur-groen,
    .hm-kleur-green { --hm-swatch:#2f7d46; --hm-swatch-border:#2f7d46; }
    .hm-kleur-rood,
    .hm-kleur-red { --hm-swatch:#c0392b; --hm-swatch-border:#c0392b; }
    .hm-kleur-geel { --hm-swatch:#ffcf26; --hm-swatch-border:rgba(17,24,39,.2); }
    .hm-kleur-goud { --hm-swatch:#d4af37; --hm-swatch-border:rgba(120,91,20,.34); }
    .hm-kleur-zilver { --hm-swatch:#c0c7d1; --hm-swatch-border:rgba(17,24,39,.2); }
    .hm-kleur-oranje { --hm-swatch:#f97316; --hm-swatch-border:#f97316; }
    .hm-kleur-paars { --hm-swatch:#7c3aed; --hm-swatch-border:#7c3aed; }
    .hm-kleur-roze { --hm-swatch:#f9a8d4; --hm-swatch-border:rgba(190,24,93,.28); }
    .hm-kleur-taupe { --hm-swatch:#9f8f86; --hm-swatch-border:#9f8f86; }
    .hm-kleur-turquoise { --hm-swatch:#2dd4bf; --hm-swatch-border:#2dd4bf; }
    .hm-kleur-naturel { --hm-swatch:#c9a46a; --hm-swatch-border:rgba(120,91,58,.32); }
    .hm-kleur-koudwit,
    .hm-kleur-cold-white { --hm-swatch:#f4fbff; --hm-swatch-border:rgba(34,85,164,.25); }
    .hm-kleur-warmwit,
    .hm-kleur-warm-white { --hm-swatch:#fff3c4; --hm-swatch-border:rgba(217,119,6,.28); }
    .hm-kleur-wit-en-grijs,
    .hm-kleur-white-and-grey { --hm-swatch:linear-gradient(135deg,#fff 0 50%,#9ca3af 50% 100%); --hm-swatch-border:rgba(17,24,39,.24); }
    .hm-kleur-wit-en-blauw,
    .hm-kleur-white-and-blue { --hm-swatch:linear-gradient(135deg,#fff 0 50%,#2255a4 50% 100%); --hm-swatch-border:rgba(34,85,164,.35); }
    .hm-kleur-zwart-en-rood { --hm-swatch:linear-gradient(135deg,#111827 0 50%,#c0392b 50% 100%); --hm-swatch-border:rgba(17,24,39,.35); }
    .hm-kleur-warmwit-en-donkergroen { --hm-swatch:linear-gradient(135deg,#fff3c4 0 50%,#14532d 50% 100%); --hm-swatch-border:rgba(20,83,45,.35); }
    .hm-kleur-gold-and-bronze { --hm-swatch:linear-gradient(135deg,#d4af37 0 50%,#8b5a2b 50% 100%); --hm-swatch-border:rgba(139,90,43,.35); }
    .hm-kleur-multikleur,
    .hm-kleur-multicolour,
    .hm-kleur-colourful,
    .hm-kleur-colorful,
    .hm-kleur-kleurrijk { --hm-swatch:linear-gradient(135deg,#ef4444 0 20%,#f59e0b 20% 40%,#22c55e 40% 60%,#2255a4 60% 80%,#a855f7 80% 100%); --hm-swatch-border:rgba(17,24,39,.28); }
    .hm-kleur-transparent { --hm-swatch:repeating-conic-gradient(#fff 0% 25%,#e5e7eb 0% 50%) 50% / 10px 10px; --hm-swatch-border:rgba(17,24,39,.24); }

    .hm-search-mobile-price-slider__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
      color: #111827;
    }

    .hm-search-mobile-price-slider__top span {
      font-size: 13px;
      font-weight: 700;
    }

    .hm-search-mobile-price-slider__top strong {
      color: #2255a4;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
    }

    .hm-search-mobile-price-slider__range-wrap {
      position: relative;
      height: 34px;
      margin: 2px 2px 10px;
      --hm-range-left: 0%;
      --hm-range-right: 0%;
    }

    .hm-search-mobile-price-slider__range-wrap::before,
    .hm-search-mobile-price-slider__range-wrap::after {
      content: "";
      position: absolute;
      top: 15px;
      height: 5px;
      border-radius: 999px;
    }

    .hm-search-mobile-price-slider__range-wrap::before {
      left: 0;
      right: 0;
      background: #e5e7eb;
    }

    .hm-search-mobile-price-slider__range-wrap::after {
      left: var(--hm-range-left);
      right: var(--hm-range-right);
      background: #2255a4;
    }

    .hm-search-mobile-price-slider__range {
      position: absolute;
      left: 0;
      top: 6px;
      width: 100%;
      height: 24px;
      margin: 0;
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      pointer-events: none;
      z-index: 2;
    }

    .hm-search-mobile-price-slider__range::-webkit-slider-thumb {
      appearance: none;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      margin-top: -7px;
      border-radius: 50%;
      background: #ffcf26;
      border: 2px solid #2255a4;
      cursor: pointer;
      pointer-events: auto;
      box-shadow: 0 2px 8px rgba(17,24,39,.16);
    }

    .hm-search-mobile-price-slider__range::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ffcf26;
      border: 2px solid #2255a4;
      cursor: pointer;
      pointer-events: auto;
      box-shadow: 0 2px 8px rgba(17,24,39,.16);
    }

    .hm-search-mobile-price-slider__inputs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .hm-search-mobile-price-slider__inputs label {
      display: flex;
      flex-direction: column;
      gap: 5px;
      color: #374151;
      font-size: 12px;
      font-weight: 600;
    }

    .hm-search-mobile-price-slider__inputs label > div {
      position: relative;
    }

    .hm-search-mobile-price-slider__inputs em {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: #6b7280;
      font-size: 13px;
      font-style: normal;
      font-weight: 500;
      pointer-events: none;
    }

    .hm-search-mobile-price-slider__inputs input {
      width: 100%;
      min-height: 38px;
      padding: 8px 10px 8px 24px;
      border: 1px solid rgba(17,24,39,.16);
      border-radius: 10px;
      color: #111827;
      font-size: 14px;
      font-weight: 600;
    }

    .hm-search-mobile-filter-actions {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1002;
      display: flex;
      gap: 8px;
      padding: 10px 16px 14px;
      background: #ffffff;
      box-shadow: 0 -4px 16px rgba(17,24,39,.08);
    }

    .hm-search-mobile-clear {
      min-height: 46px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: #f3f4f6;
      color: #111827;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
    }

    .hm-search-mobile-apply {
      flex: 1;
      min-height: 46px;
      padding: 0 14px;
      border: 0;
      border-radius: 12px;
      background: #2255a4;
      color: #ffffff;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
    }

    .hm-search-mobile-filter-form.hm-is-calculating {
      opacity: .72;
      pointer-events: none;
    }
  }

   @media screen and (max-width: 749px) {
    .hm-search-desktop-filter-wrap {
      display: none !important;
    }
  }

  @media screen and (min-width: 750px) {
    .hm-search-desktop-filter-wrap {
      position: fixed !important;
      left: 50% !important;
      bottom: 18px !important;
      transform: translateX(-50%) !important;
      width: calc(100vw - 36px) !important;
      max-width: 1360px !important;
      margin: 0 !important;
      padding: 10px 12px 10px 168px !important;
      background: #ffffff !important;
      border: 1.5px solid #2255a4 !important;
      border-radius: 20px !important;
      box-shadow: 0 16px 38px rgba(17,24,39,.20), 0 0 0 5px rgba(34,85,164,.07) !important;
      z-index: 9999 !important;
      overflow: visible !important;
    }

    .hm-search-desktop-filter-wrap::before {
      content: "Slim zoeken";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffcf26;
      color: #2255a4;
      border-right: 1.5px solid rgba(34,85,164,.20);
      border-radius: 18px 0 0 18px;
      font-size: 17px;
      font-weight: 900;
      line-height: 1.05;
      letter-spacing: -.25px;
    }

    body {
      padding-bottom: 145px !important;
    }
  }

  .hm-search-desktop-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
  }

  .hm-search-desktop-filter-message {
    flex: 0 0 255px;
    min-width: 255px;
    max-width: 255px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #2255a4;
    border: 1px solid #2255a4;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(34,85,164,.18);
    line-height: 1.25;
  }

  .hm-search-desktop-filter-message strong {
    display: inline-flex;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffcf26;
    color: #111827;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
  }

  .hm-search-desktop-filter-message span {
    margin-top: 4px;
    color: rgba(255,255,255,.92);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
  }

  .hm-search-desktop-filter-groups {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
  }

  .hm-search-filter-dropdown {
    position: relative;
    min-width: max-content;
  }

  .hm-search-filter-dropdown__summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 10px 14px;
    border: 1.5px solid rgba(34,85,164,.35);
    border-radius: 999px;
    background: #ffffff;
    color: #2255a4;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    list-style: none;
    cursor: pointer;
  }

  .hm-search-filter-dropdown__summary::-webkit-details-marker {
    display: none;
  }

  .hm-search-filter-dropdown__summary:hover {
    background: #f4f8ff;
    border-color: #2255a4;
  }

  .hm-search-filter-dropdown[open] .hm-search-filter-dropdown__summary {
    background: #2255a4;
    border-color: #2255a4;
    color: #ffffff;
  }

  .hm-search-filter-dropdown__count {
    min-width: 15px;
    height: 15px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffcf26;
    color: #111827;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
  }

  .hm-search-filter-dropdown__panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    width: min(320px, 88vw);
    max-height: min(430px, calc(100vh - 190px));
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid rgba(17,24,39,.10);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(17,24,39,.14);
    overflow: hidden;
    z-index: 12000;
  }

  .hm-search-filter-dropdown__panel--color {
    width: min(360px, 88vw);
  }

  .hm-search-filter-scrollhint {
    flex: 0 0 auto;
    padding: 9px 11px 7px;
    background: #ffffff;
    border-bottom: 1px solid rgba(17,24,39,.08);
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
  }

  .hm-search-filter-options {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 295px;
    padding: 10px 10px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(34,85,164,.45) #f3f4f6;
  }

  .hm-search-filter-options--color {
    gap: 7px !important;
  }

  .hm-search-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #111827;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
  }

  .hm-search-filter-option input {
    width: 16px;
    height: 16px;
    margin: 0;
  }

  .hm-search-filter-option span {
    flex: 1;
    min-width: 0;
  }

  .hm-search-filter-option em {
    color: #6b7280;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
  }

  .hm-search-filter-option--disabled {
    opacity: .45;
    cursor: not-allowed;
  }

  .hm-search-filter-option--color {
    position: relative !important;
    min-height: 38px !important;
    padding: 8px 10px 8px 40px !important;
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid rgba(17,24,39,.12) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  .hm-search-filter-option--color::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: var(--hm-swatch, #e5e7eb);
    border: 1px solid var(--hm-swatch-border, rgba(17,24,39,.18));
  }

  .hm-search-filter-option--color input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .hm-search-filter-option--color span {
    color: #111827 !important;
    font-weight: 700 !important;
  }

  .hm-search-filter-option--color em {
    margin-left: auto !important;
    min-width: 25px !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .hm-search-filter-option--color:has(input:checked) {
    border-color: #2255a4 !important;
    background: #f4f8ff !important;
    box-shadow: 0 0 0 2px rgba(34,85,164,.12) !important;
  }

  .hm-search-filter-option--color:has(input:checked) span::before {
    content: "✓ ";
    color: #2255a4;
    font-weight: 950;
  }

  .hm-kleur-zwart { --hm-swatch:#111827; --hm-swatch-border:#111827; }
  .hm-kleur-antraciet { --hm-swatch:#374151; --hm-swatch-border:#374151; }
  .hm-kleur-wit,
  .hm-kleur-white,
  .hm-kleur-hoogglans-wit { --hm-swatch:#ffffff; --hm-swatch-border:rgba(34,85,164,.35); }
  .hm-kleur-beige { --hm-swatch:#d8c3a5; --hm-swatch-border:rgba(120,91,58,.28); }
  .hm-kleur-creme { --hm-swatch:#f3e7c9; --hm-swatch-border:rgba(120,91,58,.22); }
  .hm-kleur-bruin { --hm-swatch:#8b5e3c; --hm-swatch-border:#8b5e3c; }
  .hm-kleur-grijs { --hm-swatch:#9ca3af; --hm-swatch-border:#9ca3af; }
  .hm-kleur-blauw,
  .hm-kleur-blue { --hm-swatch:#2255a4; --hm-swatch-border:#2255a4; }
  .hm-kleur-groen,
  .hm-kleur-green { --hm-swatch:#2f7d46; --hm-swatch-border:#2f7d46; }
  .hm-kleur-rood,
  .hm-kleur-red { --hm-swatch:#c0392b; --hm-swatch-border:#c0392b; }
  .hm-kleur-geel { --hm-swatch:#ffcf26; --hm-swatch-border:rgba(17,24,39,.2); }
  .hm-kleur-goud { --hm-swatch:#d4af37; --hm-swatch-border:rgba(120,91,20,.34); }
  .hm-kleur-zilver { --hm-swatch:#c0c7d1; --hm-swatch-border:rgba(17,24,39,.2); }
  .hm-kleur-oranje { --hm-swatch:#f97316; --hm-swatch-border:#f97316; }
  .hm-kleur-paars { --hm-swatch:#7c3aed; --hm-swatch-border:#7c3aed; }
  .hm-kleur-roze { --hm-swatch:#f9a8d4; --hm-swatch-border:rgba(190,24,93,.28); }
  .hm-kleur-taupe { --hm-swatch:#9f8f86; --hm-swatch-border:#9f8f86; }
  .hm-kleur-turquoise { --hm-swatch:#2dd4bf; --hm-swatch-border:#2dd4bf; }
  .hm-kleur-naturel { --hm-swatch:#c9a46a; --hm-swatch-border:rgba(120,91,58,.32); }
  .hm-kleur-koudwit,
  .hm-kleur-cold-white { --hm-swatch:#f4fbff; --hm-swatch-border:rgba(34,85,164,.25); }
  .hm-kleur-warmwit,
  .hm-kleur-warm-white { --hm-swatch:#fff3c4; --hm-swatch-border:rgba(217,119,6,.28); }
  .hm-kleur-wit-en-grijs,
  .hm-kleur-white-and-grey { --hm-swatch:linear-gradient(135deg,#fff 0 50%,#9ca3af 50% 100%); --hm-swatch-border:rgba(17,24,39,.24); }
  .hm-kleur-wit-en-blauw,
  .hm-kleur-white-and-blue { --hm-swatch:linear-gradient(135deg,#fff 0 50%,#2255a4 50% 100%); --hm-swatch-border:rgba(34,85,164,.35); }
  .hm-kleur-zwart-en-rood { --hm-swatch:linear-gradient(135deg,#111827 0 50%,#c0392b 50% 100%); --hm-swatch-border:rgba(17,24,39,.35); }
  .hm-kleur-warmwit-en-donkergroen { --hm-swatch:linear-gradient(135deg,#fff3c4 0 50%,#14532d 50% 100%); --hm-swatch-border:rgba(20,83,45,.35); }
  .hm-kleur-gold-and-bronze { --hm-swatch:linear-gradient(135deg,#d4af37 0 50%,#8b5a2b 50% 100%); --hm-swatch-border:rgba(139,90,43,.35); }
  .hm-kleur-multikleur,
  .hm-kleur-multicolour,
  .hm-kleur-colourful,
  .hm-kleur-colorful,
  .hm-kleur-kleurrijk { --hm-swatch:linear-gradient(135deg,#ef4444 0 20%,#f59e0b 20% 40%,#22c55e 40% 60%,#2255a4 60% 80%,#a855f7 80% 100%); --hm-swatch-border:rgba(17,24,39,.28); }
  .hm-kleur-transparent { --hm-swatch:repeating-conic-gradient(#fff 0% 25%,#e5e7eb 0% 50%) 50% / 10px 10px; --hm-swatch-border:rgba(17,24,39,.24); }

  .hm-search-price-slider {
    flex: 1 1 auto;
    padding: 10px;
    overflow: visible;
  }

  .hm-search-price-slider__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    color: #111827;
  }

  .hm-search-price-slider__top span {
    font-size: 13px;
    font-weight: 700;
  }

  .hm-search-price-slider__top strong {
    color: #2255a4;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
  }

  .hm-search-price-slider__range-wrap {
    position: relative;
    height: 34px;
    margin: 2px 2px 10px;
    --hm-range-left: 0%;
    --hm-range-right: 0%;
  }

  .hm-search-price-slider__range-wrap::before,
  .hm-search-price-slider__range-wrap::after {
    content: "";
    position: absolute;
    top: 15px;
    height: 5px;
    border-radius: 999px;
  }

  .hm-search-price-slider__range-wrap::before {
    left: 0;
    right: 0;
    background: #e5e7eb;
  }

  .hm-search-price-slider__range-wrap::after {
    left: var(--hm-range-left);
    right: var(--hm-range-right);
    background: #2255a4;
  }

  .hm-search-price-slider__range {
    position: absolute;
    left: 0;
    top: 6px;
    width: 100%;
    height: 24px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    pointer-events: none;
    z-index: 2;
  }

  .hm-search-price-slider__range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border-radius: 50%;
    background: #ffcf26;
    border: 2px solid #2255a4;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(17,24,39,.16);
  }

  .hm-search-price-slider__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffcf26;
    border: 2px solid #2255a4;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(17,24,39,.16);
  }

  .hm-search-price-slider__inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .hm-search-price-slider__inputs label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
  }

  .hm-search-price-slider__inputs label > div {
    position: relative;
  }

  .hm-search-price-slider__inputs em {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    pointer-events: none;
  }

  .hm-search-price-slider__inputs input {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px 8px 24px;
    border: 1px solid rgba(17,24,39,.16);
    border-radius: 10px;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
  }

  .hm-search-filter-apply {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 13px 14px;
    border: 0;
    border-radius: 0 0 12px 12px;
    background: #2255a4;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 -10px 18px rgba(17,24,39,.08);
  }

  .hm-search-filter-sort {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: max-content;
    margin-left: auto;
    padding: 8px 10px;
    border: 1.5px solid rgba(34,85,164,.22);
    border-radius: 11px;
    background: #f8fafc;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
  }

  .hm-search-filter-sort label {
    color: #2255a4;
    font-size: 12px;
    font-weight: 800;
  }

  .hm-search-filter-sort select {
    width: 190px;
    max-width: 190px;
    min-height: 38px;
    padding: 6px 28px 6px 9px;
    border: 1px solid rgba(17,24,39,.14);
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
  }

  .hm-search-filter-bar-apply {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: #2255a4;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
  }

  .hm-search-filter-clear {
    min-width: max-content;
    padding: 11px 13px;
    border-radius: 999px;
    background: #fff3b0;
    color: #111827;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }

  .hm-search-active-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    margin-top: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .hm-search-active-filter {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    background: #2255a4;
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
  }
/* Desktop: actieve filterchips verbergen voor meer rust */
@media screen and (min-width: 750px) {
  .hm-active-filters,
  .hm-search-active-filters {
    display: none !important;
  }

  .hm-desktop-filter-wrap,
  .hm-search-desktop-filter-wrap {
    padding-bottom: 10px !important;
  }
}

/* =========================================================
   HM-FILTERS:COLOR-GROUPS
   Styling voor tijdelijke hoofdkleur-groepen in filters.

   Doel:
   - Ruwe Shopify kleurwaarden blijven bestaan.
   - Klant ziet simpele groepen zoals Blauw, Wit, Mix.
   - Verborgen child-inputs sturen onder water de echte waarden mee.
   ========================================================= */

.hm-filter-color-group {
  display: block !important;
}

.hm-color-group-children,
.hm-color-group-child {
  display: none !important;
}

.hm-kleur-mix {
  --hm-swatch: linear-gradient(
    135deg,
    #ffffff 0 20%,
    #2255a4 20% 40%,
    #2f7d46 40% 60%,
    #c0392b 60% 80%,
    #ffcf26 80% 100%
  );
  --hm-swatch-border: rgba(17, 24, 39, 0.28);
}

.hm-kleur-overig {
  --hm-swatch: #e5e7eb;
  --hm-swatch-border: rgba(17, 24, 39, 0.22);
}

.hm-kleur-transparant,
.hm-kleur-transparent {
  --hm-swatch: repeating-conic-gradient(
    #ffffff 0% 25%,
    #e5e7eb 0% 50%
  ) 50% / 10px 10px;
  --hm-swatch-border: rgba(17, 24, 39, 0.24);
}