/* Productfilter ronde 2: de opmaak uit docs/categoriefilter/ronde2/Categoriefilter-voorstel.html (2a desktop, 2b mobiel)
   bovenop "Product Filters for WooCommerce". Alles hangt aan body.ph-filter-r2 en bouwt voort op ph-filter.css (ronde 1):
   zonder die klasse verandert er niets. Geladen door mu-plugins/ph-filter-test.php, samen met ph-filter.js.
   Een groep herken je aan de sleutel van zijn keuzes in het adres: :has(input[name="Gezondheidsdoelen"]) enzovoort.
   Afwijkingen van het ontwerp om het contrast: randen van vakjes, velden en de schakelaar zijn #8a948a (3,1:1) in plaats
   van lichtgrijs, en kleine grijze tekst is #767676 of donkerder in plaats van #999. */
body.ph-filter-r2{--ph-groen:var(--fs-color-primary,#006837);--ph-lijn:#eef0ea;--ph-rand:#8a948a}
body.ph-filter-r2 .ph-r2-weg,body.ph-filter-r2 .ph-r2-uit{display:none!important}

/* ---- De kop ("Filter", de teller, "Wis alles") en de kaart ---- */
body.ph-filter-r2 .wcpf-filter{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;border:0;background:none}
body.ph-filter-r2 .wcpf-filter::before{padding:0;border:0;font-size:20px;line-height:24px;color:#333}
body.ph-filter-r2 .wcpf-filter::after{content:attr(data-ph-n);box-sizing:border-box;min-width:22px;height:22px;padding:0 7px;border-radius:99px;background:var(--ph-groen);color:#fff;font-size:12px;font-weight:700;line-height:22px;text-align:center}
body.ph-filter-r2 .wcpf-filter:not([data-ph-n])::after,body.ph-filter-r2 .wcpf-filter[data-ph-n="0"]::after{display:none}
body.ph-filter-r2 .wcpf-filter .wcpf-filter-inner{order:1;flex:0 0 100%;margin-top:14px;border:1px solid #e6e9e3;border-radius:14px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.04);overflow:hidden}
body.ph-filter-r2 .wcpf-filter .wcpf-field-button{position:absolute;top:0;right:0;margin:0;padding:0;border:0}
body.ph-filter-r2 .wcpf-filter .wcpf-field-button button{min-height:24px;color:#4e657b;font-size:13px;font-weight:400;line-height:24px}
body.ph-filter-r2 .wcpf-filter[data-ph-n="0"] .wcpf-field-button{display:none}
/* De gekozen filters staan in ronde 2 boven de producten, niet meer boven het filter. */
body.ph-filter-r2 #shop-sidebar .wcpf_widget_filter_notes{display:none}

/* ---- Een groep: kop met samenvatting en pijltje, inklapbaar ---- */
body.ph-filter-r2 .wcpf-filter .wcpf-field-item{padding:0;border-bottom:1px solid var(--ph-lijn)}
body.ph-filter-r2 .wcpf-filter .wcpf-field-item.wcpf-box-style .wcpf-heading-label{display:flex;align-items:center;gap:8px;margin:0;padding:14px 16px;font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:#333;cursor:pointer;pointer-events:auto}
body.ph-filter-r2 .wcpf-filter .wcpf-heading-label .text{flex:1 1 auto}
body.ph-filter-r2 .wcpf-filter .wcpf-heading-label .ph-r2-sam{font-size:12px;color:var(--ph-groen)}
body.ph-filter-r2 .wcpf-filter .wcpf-field-item.wcpf-box-style .wcpf-heading-label .box-toggle{display:block;position:static;flex:0 0 24px;width:24px;height:24px;margin:-2px -6px -2px 0;padding:0;transform:none;border-radius:50%}
body.ph-filter-r2 .wcpf-filter .wcpf-field-item.wcpf-box-style .wcpf-heading-label .box-toggle::before{content:"";display:block;width:6px;height:6px;margin:10px auto 0;border:solid #666;border-width:1.5px 0 0 1.5px;transform:rotate(45deg)}
body.ph-filter-r2 .wcpf-filter .wcpf-field-item.wcpf-box-style.wcpf-box-hide .wcpf-heading-label .box-toggle::before{margin-top:6px;transform:rotate(225deg)}
body.ph-filter-r2 .wcpf-filter .wcpf-field-item .wcpf-content{margin:0;padding:0 16px 16px}
body.ph-filter-r2 .wcpf-filter .wcpf-field-item.wcpf-box-hide .wcpf-content{display:none}

/* ---- Een rij met een vinkje (Merk, Soort voeding): eigen vinkje van 20, de hele rij klikbaar ---- */
body.ph-filter-r2 .wcpf-field-checkbox-list .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-checkbox-label{min-height:34px;padding:0 6px;border-radius:8px;opacity:1;transition:none}
body.ph-filter-r2 .wcpf-field-checkbox-list .wcpf-checkbox-list .wcpf-checkbox-item:not(.disabled) .wcpf-checkbox-label:hover{background:#f4f7f2}
body.ph-filter-r2 .wcpf-field-checkbox-list .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-input-container{flex:0 0 20px;width:20px;max-width:20px;height:20px;border:1.5px solid var(--ph-rand);border-radius:6px}
body.ph-filter-r2 .wcpf-field-checkbox-list .wcpf-checkbox-list .wcpf-checkbox-item.checked > .wcpf-checkbox-item-inner > .wcpf-checkbox-label .wcpf-input-container{border-color:var(--ph-groen);background:var(--ph-groen)}
body.ph-filter-r2 .wcpf-field-checkbox-list .wcpf-checkbox-list .wcpf-checkbox-item.checked > .wcpf-checkbox-item-inner > .wcpf-checkbox-label .wcpf-input-container::after{top:4px;left:3px;width:9px;height:4px}
body.ph-filter-r2 .wcpf-field-checkbox-list .wcpf-checkbox-list .wcpf-checkbox-item.checked > .wcpf-checkbox-item-inner > .wcpf-checkbox-label .wcpf-title{font-weight:400}
/* Grijs: een keuze die met de andere filters niets oplevert. */
body.ph-filter-r2 .wcpf-field-checkbox-list .wcpf-checkbox-list .wcpf-checkbox-item.disabled:not(.checked) > .wcpf-checkbox-item-inner > .wcpf-checkbox-label{color:#a3a8a1;opacity:1;cursor:default}
body.ph-filter-r2 .wcpf-field-checkbox-list .wcpf-checkbox-list .wcpf-checkbox-item.disabled:not(.checked) > .wcpf-checkbox-item-inner > .wcpf-checkbox-label .wcpf-input-container{border-color:#dfe2dc;background:#fafafa}

/* ---- Merk: zoekveld, "Populair", "Alle N merken" (door het script neergezet) ---- */
body.ph-filter-r2 .wcpf-filter .ph-r2-zoek{box-sizing:border-box;width:100%;height:38px;margin:0 0 10px;padding:0 14px 0 38px;border:1px solid rgba(0,0,0,.09);border-radius:99px;background:rgba(0,0,0,.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") 14px center no-repeat;box-shadow:none;font-size:14px;color:#222}
body.ph-filter-r2 .wcpf-filter .ph-r2-zoek::placeholder{color:#696969;opacity:1}
body.ph-filter-r2 .wcpf-filter .ph-r2-pop{display:block;margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#767676}
body.ph-filter-r2 .wcpf-filter .ph-r2-geen{display:block;padding:4px 0;font-size:13px;color:#696969}
body.ph-filter-r2 .wcpf-filter .ph-r2-meer{display:block;margin:8px 0 0;padding:0;border:0;background:none;box-shadow:none;color:var(--ph-groen);font-size:13px;font-weight:700;line-height:24px}

/* ---- Gezondheidsdoel: pillen in plaats van vinkjes; de onzichtbare knop ligt over de hele pil ---- */
body.ph-filter-r2 .wcpf-field-item:has(input[name="Gezondheidsdoelen"]) .wcpf-checkbox-list{display:flex;flex-wrap:wrap;gap:8px}
body.ph-filter-r2 .wcpf-field-item:has(input[name="Gezondheidsdoelen"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-checkbox-label{position:relative;min-height:34px;padding:0 13px;border:1px solid #d9ddd5;border-radius:99px;background:#fff;font-size:13px;white-space:nowrap}
body.ph-filter-r2 .wcpf-field-item:has(input[name="Gezondheidsdoelen"]) .wcpf-checkbox-list .wcpf-checkbox-item:not(.disabled) .wcpf-checkbox-label:hover{border-color:var(--ph-groen);background:#fff}
body.ph-filter-r2 .wcpf-field-item:has(input[name="Gezondheidsdoelen"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-checkbox-label .wcpf-input-container{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;flex:none;width:auto;max-width:none;height:auto;border:0;border-radius:99px;background:none}
body.ph-filter-r2 .wcpf-field-item:has(input[name="Gezondheidsdoelen"]) .wcpf-checkbox-list .wcpf-checkbox-item.checked > .wcpf-checkbox-item-inner > .wcpf-checkbox-label .wcpf-input-container{background:none}
body.ph-filter-r2 .wcpf-field-item:has(input[name="Gezondheidsdoelen"]) .wcpf-checkbox-list .wcpf-checkbox-item.checked > .wcpf-checkbox-item-inner > .wcpf-checkbox-label .wcpf-input-container::after{display:none}
body.ph-filter-r2 .wcpf-field-item:has(input[name="Gezondheidsdoelen"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-title-container{gap:6px}
body.ph-filter-r2 .wcpf-field-item:has(input[name="Gezondheidsdoelen"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-title{font-size:13px}
body.ph-filter-r2 .wcpf-field-item:has(input[name="Gezondheidsdoelen"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-product-counts{font-size:11px;color:inherit;opacity:.75}
body.ph-filter-r2 .wcpf-field-item:has(input[name="Gezondheidsdoelen"]) .wcpf-checkbox-list .wcpf-checkbox-item.checked > .wcpf-checkbox-item-inner > .wcpf-checkbox-label{border-color:var(--ph-groen);background:var(--ph-groen);color:#fff}
body.ph-filter-r2 .wcpf-field-item:has(input[name="Gezondheidsdoelen"]) .wcpf-checkbox-list .wcpf-checkbox-item.checked > .wcpf-checkbox-item-inner > .wcpf-checkbox-label .wcpf-title{font-weight:700}
body.ph-filter-r2 .wcpf-field-item:has(input[name="Gezondheidsdoelen"]) .wcpf-checkbox-list .wcpf-checkbox-item.disabled:not(.checked) > .wcpf-checkbox-item-inner > .wcpf-checkbox-label{border-color:#eee;background:#fafafa}

/* ---- Prijs: vier pillen (script) en de twee velden van de plugin; de schuif vervalt ---- */
body.ph-filter-r2 .wcpf-field-price-slider .priceSliderInput,body.ph-filter-r2 .wcpf-field-price-slider .priceLabel{display:none!important}
body.ph-filter-r2 .wcpf-field-price-slider .priceSliderAmount{font-size:14px;line-height:1.4;text-align:left}
body.ph-filter-r2 .ph-r2-prijs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
body.ph-filter-r2 .ph-r2-prijs .ph-r2-pil,body.ph-filter-r2 .category-filter-row .ph-r2-snel{box-sizing:border-box;height:34px;min-height:0;margin:0;padding:0 13px;border:1px solid #d9ddd5;border-radius:99px;background:#fff;box-shadow:none;color:#333;font-size:13px;font-weight:400;line-height:32px;letter-spacing:0;text-transform:none;white-space:nowrap}
body.ph-filter-r2 .ph-r2-prijs .ph-r2-pil:hover:not(:disabled),body.ph-filter-r2 .category-filter-row .ph-r2-snel:hover:not(:disabled){border-color:var(--ph-groen)}
body.ph-filter-r2 .ph-r2-prijs .ph-r2-pil[aria-pressed="true"],body.ph-filter-r2 .category-filter-row .ph-r2-snel[aria-pressed="true"]{border-color:var(--ph-groen);background:var(--ph-groen);color:#fff;font-weight:700}
body.ph-filter-r2 .ph-r2-prijs .ph-r2-pil:disabled,body.ph-filter-r2 .category-filter-row .ph-r2-snel:disabled{border-color:#eee;background:#fafafa;color:#a3a8a1;opacity:1;cursor:default}
body.ph-filter-r2 .wcpf-field-price-slider.wcpf-display-min-max-inputs .wcpf-price-slider-min-max-inputs{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:0}
body.ph-filter-r2 .wcpf-field-price-slider .wcpf-price-slider-min-max-inputs::before{content:"\20AC";color:#696969}
body.ph-filter-r2 .wcpf-field-price-slider .wcpf-price-slider-min-max-inputs::after{content:"\2013\00A0\20AC";order:2;color:#696969}
body.ph-filter-r2 .wcpf-field-price-slider.wcpf-display-min-max-inputs .wcpf-min-input{order:1}
body.ph-filter-r2 .wcpf-field-price-slider.wcpf-display-min-max-inputs .wcpf-max-input{order:3}
body.ph-filter-r2 .wcpf-field-price-slider.wcpf-display-min-max-inputs .wcpf-price-slider-min-max-inputs .wcpf-input{box-sizing:border-box;width:100%;height:40px;margin:0;padding:0 10px;border:1px solid var(--ph-rand);border-radius:10px;background:#fff;box-shadow:none;font-size:14px;color:#222}

/* ---- Op voorraad: een schakelaar van 44 x 26, de naam links met het aantal eronder ---- */
body.ph-filter-r2 .wcpf-filter .wcpf-field-item:has(input[name="voorraad"]) .wcpf-heading-label{display:none}
body.ph-filter-r2 .wcpf-filter .wcpf-field-item:has(input[name="voorraad"]) .wcpf-content{display:block!important;padding:8px 16px 10px}
body.ph-filter-r2 .wcpf-field-item:has(input[name="voorraad"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-checkbox-label{flex-direction:row-reverse;min-height:44px;padding:0}
body.ph-filter-r2 .wcpf-field-item:has(input[name="voorraad"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-checkbox-label:hover{background:none}
body.ph-filter-r2 .wcpf-field-item:has(input[name="voorraad"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-checkbox-label .wcpf-input-container{position:relative;flex:0 0 44px;width:44px;max-width:44px;height:26px;border:0;border-radius:99px;background:var(--ph-rand);transition:background .15s}
body.ph-filter-r2 .wcpf-field-item:has(input[name="voorraad"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-checkbox-label .wcpf-input-container::after{content:"";display:block;position:absolute;top:3px;left:3px;width:20px;height:20px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transform:none;transition:left .15s}
body.ph-filter-r2 .wcpf-field-item:has(input[name="voorraad"]) .wcpf-checkbox-list .wcpf-checkbox-item.checked > .wcpf-checkbox-item-inner > .wcpf-checkbox-label .wcpf-input-container{background:var(--ph-groen)}
body.ph-filter-r2 .wcpf-field-item:has(input[name="voorraad"]) .wcpf-checkbox-list .wcpf-checkbox-item.checked > .wcpf-checkbox-item-inner > .wcpf-checkbox-label .wcpf-input-container::after{top:3px;left:21px;width:20px;height:20px}
body.ph-filter-r2 .wcpf-field-item:has(input[name="voorraad"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-title-container{flex-direction:column;align-items:flex-start;gap:1px}
body.ph-filter-r2 .wcpf-field-item:has(input[name="voorraad"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-title,body.ph-filter-r2 .wcpf-field-item:has(input[name="voorraad"]) .wcpf-checkbox-list .wcpf-checkbox-item.checked > .wcpf-checkbox-item-inner > .wcpf-checkbox-label .wcpf-title{font-weight:700}
body.ph-filter-r2 .wcpf-field-item:has(input[name="voorraad"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-product-counts{font-size:12px;color:#696969}
body.ph-filter-r2 .wcpf-field-item:has(input[name="voorraad"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-product-counts::before{content:"Direct leverbaar \00B7  "}

/* ---- Boven de producten: de telling, de sorteerknoppen, de gekozen filters als pillen ---- */
body.ph-filter-r2 .woocommerce-result-count{color:#555}
/* Het script zet het aantal in data-ph-tekst ("54 producten"); de zin van WooCommerce blijft er voor hulpsoftware. */
body.ph-filter-r2 .woocommerce-result-count[data-ph-tekst]{font-size:0}
body.ph-filter-r2 .woocommerce-result-count[data-ph-tekst]::before{content:attr(data-ph-tekst);font-size:14px}
/* Zonder resultaat is de regel leeg; het thema verbergt lege alinea's, maar "0 producten" moet te zien zijn. */
body.ph-filter-r2 .woocommerce-result-count[data-ph-tekst]:empty{display:inline-block}
body.ph-filter-r2 .ph-r2-sorteer{display:inline-flex;gap:6px;padding:4px;border-radius:99px;background:#f3f4f1;vertical-align:middle}
body.ph-filter-r2 .ph-r2-sorteer + .woocommerce-ordering{display:none}
body.ph-filter-r2 .ph-r2-sorteer button{min-height:0;margin:0;padding:6px 14px;border:0;border-radius:99px;background:transparent;box-shadow:none;color:#555;font-size:13px;font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none;white-space:nowrap}
body.ph-filter-r2 .ph-r2-sorteer button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);color:#111;font-weight:700}
body.ph-filter-r2 .ph-r2-boven{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 16px}
body.ph-filter-r2 .ph-r2-boven:not(:has(.wcpf-note-item,.woocommerce-result-count:not(:empty),.woocommerce-result-count[data-ph-tekst])){display:none}
body.ph-filter-r2 .ph-r2-boven .woocommerce-result-count{flex:0 0 100%;margin:0}
body.ph-filter-r2 .ph-r2-boven .woocommerce-result-count:empty:not([data-ph-tekst]){display:none}
body.ph-filter-r2 .ph-r2-boven .wcpf-filter-notes .wcpf-note-list{display:flex;flex-wrap:wrap;gap:8px}
body.ph-filter-r2 .ph-r2-boven .wcpf-filter-notes .wcpf-note-list .wcpf-note-item{position:relative;display:block;margin:0;padding:6px 34px 6px 14px;border:1px solid #cfd6cc;border-radius:99px;background:#fff;line-height:18px}
body.ph-filter-r2 .ph-r2-boven .wcpf-filter-notes .wcpf-note-list .wcpf-note-item:hover{border-color:var(--ph-groen)}
body.ph-filter-r2 .ph-r2-boven .wcpf-filter-notes .wcpf-note-list .wcpf-note-item::before,body.ph-filter-r2 .ph-r2-boven .wcpf-filter-notes .wcpf-note-list .wcpf-note-item::after{display:none}
body.ph-filter-r2 .ph-r2-boven .wcpf-filter-notes .wcpf-note-list .wcpf-note-item .note-text{float:none;font-size:13px;font-weight:700;color:#333}
/* Het kruisje van de plugin ligt over de hele pil: de pil is de knop. */
body.ph-filter-r2 .ph-r2-boven .wcpf-filter-notes .wcpf-note-list .wcpf-note-item .remove-filter{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;float:none;width:auto;height:auto;min-height:0;margin:0;border-radius:99px;background:none}
body.ph-filter-r2 .ph-r2-boven .wcpf-filter-notes .wcpf-note-list .wcpf-note-item .remove-filter::before{content:"\00D7";top:50%;right:8px;left:auto;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:#eef0ea;color:#555;font-size:13px;line-height:18px;text-align:center;transform:none}
body.ph-filter-r2 .ph-r2-boven .wcpf-filter-notes .wcpf-note-list .wcpf-note-item .remove-filter::after{display:none}
body.ph-filter-r2 .ph-r2-boven .ph-r2-wis{min-height:24px;margin:0;padding:0 4px;border:0;background:none;box-shadow:none;color:#4e657b;font-size:13px;font-weight:400;line-height:24px;letter-spacing:0;text-transform:none;text-decoration:underline;text-underline-offset:3px}
body.ph-filter-r2 .ph-r2-boven:not(:has(.wcpf-note-item)) .ph-r2-wis{display:none}
body.ph-filter-r2 .ph-r2-voet{display:none}
body.ph-filter-r2 .ph-r2-sorteer button:focus-visible,body.ph-filter-r2 .ph-r2-boven :focus-visible,body.ph-filter-r2 .ph-r2-snel:focus-visible,body.ph-filter-r2 .ph-r2-voet button:focus-visible,body.ph-filter-r2 .category-filter-row .filter-button:focus-visible{outline:3px solid rgba(0,104,55,.35);outline-offset:2px}

/* ---- Telefoon en tablet (het thema toont de zijbalk daar als paneel) ---- */
@media (max-width:849px){
  /* De rij onder het kruimelpad: "Filter · n" en de snelkeuzes, opzij te schuiven. */
  body.ph-filter-r2 .category-filter-row{display:flex;gap:8px;margin:8px -15px 0;padding:2px 15px 6px;overflow-x:auto;scrollbar-width:none;text-align:left}
  body.ph-filter-r2 .category-filter-row::-webkit-scrollbar{display:none}
  body.ph-filter-r2 .category-filter-row .inline-block{display:none}
  body.ph-filter-r2 .category-filter-row .filter-button{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:44px;margin:0;padding:0 16px;border-radius:99px;background:var(--ph-groen);color:#fff;font-size:14px;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap}
  body.ph-filter-r2 .category-filter-row .ph-r2-snel{flex:0 0 auto;height:44px;padding:0 16px;font-size:14px;line-height:42px}
  body.ph-filter-r2 .woocommerce-result-count.hide-for-medium{display:block!important;margin:8px 0}
  body.ph-filter-r2 .ph-r2-sorteer{max-width:100%;overflow-x:auto;scrollbar-width:none}
  body.ph-filter-r2 .ph-r2-sorteer{gap:2px;padding:3px}
  body.ph-filter-r2 .ph-r2-sorteer button{padding:0 14px;line-height:44px}
  body.ph-filter-r2 .ph-r2-boven .wcpf-filter-notes .wcpf-note-list .wcpf-note-item{padding-top:12px;padding-bottom:12px}
  body.ph-filter-r2 .ph-r2-boven .ph-r2-wis{min-height:44px;line-height:44px}

  /* Het paneel van het thema komt van onderen: 88% hoog, ronde bovenhoeken, een greepje en een ronde sluitknop.
     Alleen het paneel met de zijbalk van de winkel; het menu van het thema gebruikt hetzelfde paneel en blijft zoals het is. */
  body.ph-filter-r2 .mfp-wrap.off-canvas:has(#shop-sidebar) .mfp-content{top:auto;right:0;bottom:0;left:0;width:100%;max-width:none;height:88vh;height:88dvh;border-radius:18px 18px 0 0;background:#fff;box-shadow:0 -6px 24px rgba(0,0,0,.15);transform:translateY(100%)}
  body.ph-filter-r2 .mfp-wrap.off-canvas.mfp-ready:has(#shop-sidebar) .mfp-content{transform:none}
  /* De kop blijft staan terwijl de inhoud schuift: het greepje (als achtergrond) en "Filter"; het kruis van het thema staat erover. */
  body.ph-filter-r2 .mfp-wrap.off-canvas:has(#shop-sidebar) .mfp-content::before{content:"Filter";position:sticky;top:0;z-index:2;display:block;padding:22px 16px 10px;border-radius:18px 18px 0 0;background:#fff linear-gradient(#d6d9d3,#d6d9d3) center 8px/40px 4px no-repeat;font-size:19px;font-weight:700;line-height:32px;color:#333}
  body.ph-filter-r2 .mfp-wrap.off-canvas:has(#shop-sidebar) .mfp-close{top:calc(12vh + 14px);top:calc(12dvh + 14px);right:16px;width:44px;height:44px;border-radius:50%;background:#f3f4f1;color:#555;opacity:1;mix-blend-mode:normal;line-height:44px}
  body.ph-filter-r2 .mfp-content #shop-sidebar{padding:0 16px}
  body.ph-filter-r2 .mfp-content #shop-sidebar .widget{margin:0}
  body.ph-filter-r2 .mfp-content .wcpf-filter::before,body.ph-filter-r2 .mfp-content .wcpf-filter::after{display:none}
  body.ph-filter-r2 .mfp-content .wcpf-filter .wcpf-filter-inner{margin-top:0;border:0;border-radius:0;box-shadow:none}
  /* "Wis alles" staat onderaan vast (script); zonder script blijft de knop van de plugin onder het filter staan. */
  body.ph-filter-r2 .mfp-content .wcpf-filter .wcpf-field-button{position:static;padding:12px 0}
  body.ph-filter-r2 .mfp-content:has(.ph-r2-voet) .wcpf-filter .wcpf-field-button{display:none}
  /* In het paneel staan de groepen altijd open. */
  body.ph-filter-r2 .mfp-content .wcpf-filter .wcpf-field-item.wcpf-box-style .wcpf-heading-label{padding:16px 0 10px;cursor:default;pointer-events:none}
  body.ph-filter-r2 .mfp-content .wcpf-filter .wcpf-field-item.wcpf-box-style .wcpf-heading-label .box-toggle{display:none}
  body.ph-filter-r2 .mfp-content .wcpf-filter .wcpf-field-item .wcpf-content{display:block!important;padding:0 0 16px}
  body.ph-filter-r2 .mfp-content .wcpf-filter .wcpf-field-item:has(input[name="Gezondheidsdoelen"]) .wcpf-content{display:flex!important}
  body.ph-filter-r2 .mfp-content .wcpf-filter .wcpf-field-item:has(input[name="voorraad"]) .wcpf-content{padding:8px 0 12px}
  /* Alles wat je aantikt is minstens 44 hoog. */
  body.ph-filter-r2 .mfp-content .wcpf-field-checkbox-list .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-checkbox-label{min-height:44px;gap:12px}
  body.ph-filter-r2 .mfp-content .wcpf-field-checkbox-list .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-title{font-size:15px}
  body.ph-filter-r2 .mfp-content .wcpf-field-item:has(input[name="Gezondheidsdoelen"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-checkbox-label{min-height:44px;padding:0 16px}
  body.ph-filter-r2 .mfp-content .wcpf-field-item:has(input[name="Gezondheidsdoelen"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-title{font-size:14px}
  body.ph-filter-r2 .mfp-content .wcpf-field-item:has(input[name="voorraad"]) .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-checkbox-label{min-height:52px}
  body.ph-filter-r2 .mfp-content .ph-r2-zoek{height:44px;font-size:16px}
  body.ph-filter-r2 .mfp-content .ph-r2-meer{line-height:44px;margin-top:0;font-size:14px}
  body.ph-filter-r2 .mfp-content .ph-r2-prijs .ph-r2-pil{height:44px;padding:0 16px;font-size:14px;line-height:42px}
  body.ph-filter-r2 .mfp-content .wcpf-field-price-slider.wcpf-display-min-max-inputs .wcpf-price-slider-min-max-inputs .wcpf-input{height:44px;font-size:16px}
  /* Onderaan vast: "Wis alles" en "Toon N producten". */
  body.ph-filter-r2 .mfp-content .ph-r2-voet{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:auto 1fr;gap:10px;margin:0 -16px;padding:10px 16px 14px;border-top:1px solid var(--ph-lijn);background:#fff}
  body.ph-filter-r2 .mfp-content .ph-r2-voet button{box-sizing:border-box;height:48px;min-height:0;margin:0;padding:0 18px;border:1px solid #cfd6cc;border-radius:99px;background:#fff;box-shadow:none;color:#333;font-size:14px;font-weight:700;line-height:46px;letter-spacing:0;text-transform:none;white-space:nowrap}
  body.ph-filter-r2 .mfp-content .ph-r2-voet .ph-r2-toon{border-color:var(--ph-groen);background:var(--ph-groen);color:#fff;font-size:15px}
}