.zwf-wrap{
  --zwf-bg:#fff;
  --zwf-text:#222;
  --zwf-icon:#222;
  --zwf-border:#ddd;
  --zwf-hover-bg:#f6f6f6;
  --zwf-hover-text:#111;
  --zwf-active-bg:#f0f0f0;
  --zwf-active-text:#111;
  --zwf-border-width:1px;
  --zwf-radius:6px;
  --zwf-pad-y:11px;
  --zwf-pad-x:14px;
  --zwf-margin-top:0px;
  --zwf-margin-bottom:20px;
  --zwf-gap:10px;
  --zwf-apply-bg:#222;
  --zwf-apply-text:#fff;
  --zwf-apply-border:#222;
  --zwf-apply-hover-bg:#111;
  --zwf-apply-hover-text:#fff;
  --zwf-apply-hover-border:#111;
  --zwf-apply-border-width:1px;
  --zwf-apply-radius:6px;
  --zwf-apply-pad-y:13px;
  --zwf-apply-pad-x:16px;
  margin-top:var(--zwf-margin-top);
  margin-bottom:var(--zwf-margin-bottom);
  width:100%;
}
.zwf-form{margin:0}
.zwf-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:var(--zwf-gap);
}
.zwf-filter-field{
  display:grid;
  gap:7px;
  min-width:170px;
  max-width:100%;
  margin:0;
  position:relative;
  box-sizing:border-box;
}
.zwf-filter-title{
  display:block;
  color:var(--zwf-text);
  font-size:14px;
  font-weight:400;
  line-height:1.35;
  margin:0;
}
.zwf-select-wrap,
.zwf-checkbox-filter>summary{
  position:relative;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  width:100%;
  min-height:42px;
  color:var(--zwf-text);
  background:var(--zwf-bg);
  border:var(--zwf-border-width) solid var(--zwf-border);
  border-radius:var(--zwf-radius);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.zwf-select-filter:hover .zwf-select-wrap,
.zwf-checkbox-filter>summary:hover{
  background:var(--zwf-hover-bg);
  color:var(--zwf-hover-text);
}
.zwf-filter-field.is-active .zwf-select-wrap,
.zwf-filter-field.is-active .zwf-checkbox-filter>summary{
  background:var(--zwf-active-bg);
  color:var(--zwf-active-text);
}
.zwf-select-wrap select{
  width:100%;
  min-width:0;
  margin:0;
  padding:var(--zwf-pad-y) calc(var(--zwf-pad-x) + 24px) var(--zwf-pad-y) var(--zwf-pad-x);
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:inherit!important;
  font:inherit;
  line-height:1.25;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}
.zwf-arrow{
  position:absolute;
  right:calc(var(--zwf-pad-x) + 1px);
  top:50%;
  width:7px;
  height:7px;
  border-right:2px solid var(--zwf-icon);
  border-bottom:2px solid var(--zwf-icon);
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
  box-sizing:border-box;
}
.zwf-checkbox-filter{position:relative;margin:0}
.zwf-checkbox-filter>summary{
  list-style:none;
  cursor:pointer;
  padding:var(--zwf-pad-y) calc(var(--zwf-pad-x) + 30px) var(--zwf-pad-y) var(--zwf-pad-x);
  gap:5px;
}
.zwf-checkbox-filter>summary::-webkit-details-marker{display:none}
.zwf-checkbox-filter[open]>summary .zwf-arrow{transform:translateY(-30%) rotate(225deg)}
.zwf-summary-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zwf-selected-count{white-space:nowrap}
.zwf-checkbox-panel{
  position:absolute;
  z-index:50;
  top:calc(100% + 5px);
  left:0;
  min-width:100%;
  width:max-content;
  max-width:min(360px,90vw);
  max-height:320px;
  overflow:auto;
  padding:8px;
  background:#fff;
  color:#222;
  border:1px solid #ddd;
  border-radius:var(--zwf-radius);
  box-shadow:0 8px 26px rgba(0,0,0,.12);
  box-sizing:border-box;
}
.zwf-checkbox-option{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:7px 8px;
  margin:0;
  cursor:pointer;
  border-radius:4px;
  white-space:nowrap;
}
.zwf-checkbox-option:hover{background:#f6f6f6}
.zwf-checkbox-option input{margin:2px 0 0}

.zwf-action-field{
  display:grid;
  gap:7px;
  margin:0;
  box-sizing:border-box;
  min-width:170px;
}
.zwf-apply-field{
  flex:0 0 var(--zwf-equal-control-width,190px);
  width:var(--zwf-equal-control-width,190px);
}
.zwf-reset-field{
  flex:0 0 auto;
  min-width:0;
}
.zwf-filter-title-placeholder{
  visibility:hidden;
  user-select:none;
}
.zwf-apply,
.zwf-reset{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  font-size:14px;
  line-height:1;
  text-decoration:none!important;
  white-space:nowrap;
}
.zwf-apply{
  min-height:0;
  padding:var(--zwf-apply-pad-y) var(--zwf-apply-pad-x);
  border:var(--zwf-apply-border-width) solid var(--zwf-apply-border);
  border-radius:var(--zwf-apply-radius);
  background:var(--zwf-apply-bg);
  color:var(--zwf-apply-text);
  cursor:pointer;
  text-transform:uppercase;
  font-weight:500;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.zwf-apply:hover{
  background:var(--zwf-apply-hover-bg);
  color:var(--zwf-apply-hover-text);
  border-color:var(--zwf-apply-hover-border);
}
.zwf-reset{
  padding:0 16px;
  border-radius:var(--zwf-radius);
  border:1px solid #ddd;
  background:#fff;
  color:#555;
}
.zwf-reset:hover{background:#f6f6f6;color:#222}
.zwf-reset-disabled{opacity:.45;pointer-events:none}
.zwf-equal-width .zwf-filter-field{
  flex:0 0 var(--zwf-equal-control-width,190px);
  width:var(--zwf-equal-control-width,190px);
}
.zwf-preview .zwf-controls{align-items:flex-start}
.zwf-preview .zwf-filter-title{font-size:12px}
.zwf-preview .zwf-filter-field{min-width:0}
.zwf-preview .zwf-apply,.zwf-preview .zwf-reset{font-size:12px}
@media(max-width:700px){
  .zwf-controls{display:grid;grid-template-columns:1fr}
  .zwf-filter-field,
  .zwf-equal-width .zwf-filter-field{width:100%!important;flex-basis:auto!important;min-width:0}
  .zwf-action-field{min-width:0;width:100%!important;flex-basis:auto!important}
  .zwf-apply,.zwf-reset{width:100%}
  .zwf-checkbox-panel{position:static;width:100%;max-width:none;margin-top:5px;box-shadow:none}
}

/* 0.1.5: Alle frontend-kontroller deler samme responsive linje visuelt.
   WooCommerce-sorteringen beholder sitt originale separate form-element og skyves alltid
   helt til høyre på raden den havner på. Dette bruker hele innholdsbredden og matcher
   WooCommerce/Flatsome-oppsettet bedre uten ugyldig nestede forms. */
.zwf-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:var(--zwf-gap);
  width:100%;
}
.zwf-toolbar>.zwf-form,
.zwf-toolbar>.zwf-form>.zwf-controls{
  display:contents;
}
.zwf-apply-field .zwf-apply{
  width:100%;
  min-height:42px;
}
.zwf-reset-field .zwf-reset{
  width:auto;
  min-height:42px;
}
.zwf-native-ordering{
  display:grid;
  gap:7px;
  flex:0 0 auto;
  min-width:220px;
  margin-left:auto;
  box-sizing:border-box;
}
.zwf-native-ordering .woocommerce-ordering{
  float:none!important;
  margin:0!important;
  width:100%;
}
.zwf-native-ordering .woocommerce-ordering select{
  width:100%;
  min-height:42px;
  margin:0;
  box-sizing:border-box;
}
.zwf-equal-width .zwf-apply-field{
  flex:0 0 var(--zwf-equal-control-width,190px);
  width:var(--zwf-equal-control-width,190px);
}
@media(max-width:900px){
  .zwf-native-ordering{
    min-width:170px;
  }
}
@media(max-width:700px){
  .zwf-toolbar{display:grid;grid-template-columns:1fr}
  .zwf-toolbar>.zwf-form,
  .zwf-toolbar>.zwf-form>.zwf-controls{display:contents}
  .zwf-action-field,
  .zwf-native-ordering{width:100%!important;min-width:0;flex-basis:auto!important}
  .zwf-reset-field .zwf-reset,
  .zwf-native-ordering .woocommerce-ordering,
  .zwf-native-ordering .woocommerce-ordering select{width:100%}
}

/* 0.2.0: produktantall ved hvert filtervalg. */
.zwf-checkbox-option .zwf-option-name{flex:1 1 auto}
.zwf-checkbox-option .zwf-term-count{
  flex:0 0 auto;
  margin-left:10px;
  opacity:.7;
  font-variant-numeric:tabular-nums;
}
.zwf-checkbox-option.is-unavailable{opacity:.45;cursor:not-allowed}
.zwf-checkbox-option.is-unavailable:hover{background:transparent}
.zwf-wrap.is-counting .zwf-term-count{opacity:.45}

/* 0.2.4: Filter Everything [fe_sort id="3"] i Zebra-linjen.
   Wrapperen bruker samme plassering som tidligere native WooCommerce-sortering. */
.zwf-native-ordering .widget_wpc_sorting_widget,
.zwf-native-ordering .wpc-sorting-form{
  margin:0!important;
  padding:0!important;
  width:100%;
}
.zwf-native-ordering .widget_wpc_sorting_widget{
  list-style:none;
}
.zwf-native-ordering .wpc-orderby-select{
  width:100%!important;
  min-width:0;
  min-height:42px;
  margin:0!important;
  box-sizing:border-box;
}
@media(max-width:700px){
  .zwf-native-ordering .widget_wpc_sorting_widget,
  .zwf-native-ordering .wpc-sorting-form,
  .zwf-native-ordering .wpc-orderby-select{width:100%!important}
}