/* Product filter (Product Filter by WBW) — site design.
 * Restored from the site's previous custom CSS (recovered from WP Rocket's used-CSS cache) and extended:
 * the dropdown option labels were white on white (Elementor kit colors labels white). */

/* ---- card layout: all filters in one row (desktop), stacked on mobile ---- */
.wpfMainWrapper{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;width:100%!important;min-width:100%!important;
  background:#fff;padding:14px 16px;border:1px solid #e6e6e6;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.06);box-sizing:border-box}
.sapir-filter-host{width:100%!important;max-width:100%!important}
.wpfMainWrapper .wpfFilterWrapper{flex:1 1 150px;min-width:140px;max-width:230px;margin:0!important}
.wpfMainWrapper .ms-options-wrap,.wpfMainWrapper .wpfCheckboxHier,.wpfMainWrapper .wpfFilterContent,.wpfMainWrapper select{width:100%!important;max-width:100%!important}
.wpfMainWrapper .wpfFilterButtons{flex:0 0 auto;display:flex;align-items:center;margin:0!important}
.wpfMainWrapper .wpfFilterButton{width:auto;min-width:110px;text-align:center;border-radius:8px}
@media (min-width:768px){
  .wpfMainWrapper .wpfFilterWrapper{flex:1 1 100px!important;min-width:95px!important;max-width:170px!important}
  .wpfMainWrapper .wpfFilterButtons{flex:0 0 auto!important;margin-right:auto!important}
  .wpfMainWrapper .wpfFilterButton{min-width:95px!important;width:auto!important}
}

/* ---- dropdown button + option list: readable colors ---- */
.wpfMainWrapper .ms-options-wrap>button,.wpfMainWrapper .ms-options-wrap>button:focus{
  background:#fff!important;color:#333!important;border:1px solid #cfd3d8!important;border-radius:8px!important;
  min-height:42px;font-size:14px!important;line-height:1.3!important;padding:6px 12px!important}
.wpfMainWrapper .ms-options-wrap>button *{color:#333!important}
.wpfMainWrapper .ms-options-wrap>.ms-options{background:#fff!important;border:1px solid #cfd3d8!important;border-radius:10px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.4);overflow:hidden;z-index:2000}
.wpfMainWrapper .ms-options-wrap>.ms-options>ul label,.wpfMainWrapper .ms-options li,.wpfMainWrapper .ms-options li *{color:#222!important}
.wpfMainWrapper .ms-options-wrap>.ms-options>ul label:hover,.wpfMainWrapper .ms-options-wrap>.ms-options>ul li.selected label{background:#f1f2f4!important}
.wpfMainWrapper .ms-options li:not(.wpf-empty):hover,.wpfMainWrapper .ms-options li:not(.wpf-empty):hover *{color:#fff!important}
.wpfMainWrapper .ms-options li:not(.wpf-empty):hover label{background:#A12121!important}
.wpfMainWrapper .ms-options-wrap button:hover{background:#A12121!important;border-color:#A12121!important}
.wpfMainWrapper .ms-options-wrap button:hover,.wpfMainWrapper .ms-options-wrap button:hover *{color:#fff!important}
.wpfMainWrapper .ms-search input{color:#222!important;background:#fff!important}

/* ---- search/apply button ---- */
.wpfMainWrapper .wpfFilterButton.wpfButton{background:#A12121;color:#fff}
.wpfMainWrapper .wpfFilterButton.wpfButton:hover{background:#7a0d12}

/* ---- tidy clear button + loader ---- */
.wpfBlockClear::before,.wpfBlockClear:before{font-family:inherit!important;content:"\00d7 "!important;font-weight:700!important}
.wpfBlockClear i,.wpfClearBtn::before{font-family:inherit!important}

/* ---- mobile: stacked, collapsible behind a toggle button ---- */
.sapir-filter-toggle{display:none;align-items:center;justify-content:space-between;gap:8px;width:100%;box-sizing:border-box;background:#fff!important;
  border:1px solid #e6e6e6!important;border-radius:12px;padding:13px 16px!important;margin:8px 0;font-size:15px;color:#333!important;font-weight:600;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.06)}
@media (max-width:767px){
  .wpfMainWrapper{flex-direction:column}
  .wpfMainWrapper .wpfFilterWrapper{max-width:100%;width:100%;flex-basis:auto}
  .wpfMainWrapper .wpfFilterButtons{width:100%}
  .wpfMainWrapper .wpfFilterButton{width:100%}
  .sapir-filter-toggle{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;box-sizing:border-box!important;background:#fff!important;border:1px solid #e6e6e6!important;border-radius:12px!important;padding:13px 16px!important;margin:8px 0!important;font-size:15px!important;font-weight:600!important;color:#333!important;line-height:1.3!important;box-shadow:0 2px 12px rgba(0,0,0,.06)!important;text-align:right!important}
  .sapir-filter-toggle .sapir-arrow{transition:transform .2s}
  .wpfMainWrapper.sapir-collapsed{display:none!important}
}

/* Desktop: the collapse toggle is mobile-only (theme button styles would otherwise show it) */
@media (min-width:768px){.sapir-filter-toggle{display:none!important}}

/* ---- option list spacing: the <ul> had the browser default 40px start-padding (a big gap on the right in RTL) ---- */
.wpfMainWrapper .ms-options-wrap>.ms-options>ul{padding:4px 0!important;margin:0!important;list-style:none!important}
.wpfMainWrapper .ms-options-wrap>.ms-options>ul li,.wpfMainWrapper .ms-options li{padding:0!important;margin:0!important;list-style:none!important}
.wpfMainWrapper .ms-options-wrap>.ms-options>ul label{display:block!important;position:relative;width:100%;margin:0!important;
  padding:8px 38px 8px 12px!important;line-height:1.35!important;text-align:right}
/* tidy checkboxes (were grey squares): small red-accent boxes pinned to the start edge of each row */
.wpfMainWrapper .ms-options-wrap>.ms-options>ul input[type=checkbox]{
  -webkit-appearance:none!important;appearance:none!important;position:absolute!important;top:50%!important;right:12px!important;left:auto!important;
  transform:translateY(-50%);margin:0!important;width:18px!important;height:18px!important;border:1.5px solid #9aa0a8!important;border-radius:4px!important;
  background:#fff!important;cursor:pointer;outline:0}
.wpfMainWrapper .ms-options-wrap>.ms-options>ul input[type=checkbox]:checked{
  background:#A12121 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/></svg>") center/12px no-repeat!important;
  border-color:#A12121!important}
.wpfMainWrapper .ms-options-wrap>.ms-options>ul input[type=checkbox]:checked::before{content:none!important}
.wpfMainWrapper .ms-options li:not(.wpf-empty):hover input[type=checkbox]{border-color:#fff!important}