/* ==========================================================================
   DRYSHOD — ADAPTER: Product Filters for WooCommerce (woocommerce-product-filters)
   Re-targets components.css §18 (.filters …) at the plugin's real markup.
   DECISIONS §12 "Theme Phase 1 rulings" — plugin markup adapters (#3):
   the plugin emits div.wcpf-* with no fieldset/legend/label, so Design's
   element-scoped rules cannot match it; nothing is renamed, no plugin edits.
   Declarations are Design's, verbatim; only the selectors change.

   Plugin markup (templates/field/check-box-list.php, check-box-item.php):
     .wcpf-field-item.wcpf-field-checkbox-list(.wcpf-box-style)(.wcpf-box-hide)
       .wcpf-inner
         .wcpf-field-title.wcpf-heading-label  > span.text + span.box-toggle
         .wcpf-content.wcpf-checkbox-list
           .wcpf-item.wcpf-checkbox-item(.checked)(.disabled)
             .wcpf-item-inner > .wcpf-item-label
               .wcpf-input-container > input.wcpf-input-checkbox
               .wcpf-title-container > span.wcpf-title (+ product count span)
   Group collapse is the plugin's own .box-toggle (ruling #3); ds.js's
   .filtergroup__toggle handler is unused here.
   ========================================================================== */

/* ---- field group ≈ .filters fieldset ---------------------------------- */
.filters .wcpf-field-item {
  border: 0; margin: 0; padding: 0;
  border-top: var(--ds-border) solid var(--ds-rule);
  background: none;
}
.filters .wcpf-field-item + .wcpf-field-item { margin-top: 0; }
.filters .wcpf-inner { padding: 0; }

/* ---- group heading ≈ .filtergroup__toggle ------------------------------ */
.filters .wcpf-field-title {
  width: 100%; min-height: var(--ds-tap-min);
  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s-3);
  padding: 0; margin: 0; border: 0; background: none;
  font-family: var(--ds-font-ui); font-size: var(--ds-t-label);
  font-weight: 600; letter-spacing: var(--ds-track-label);
  text-transform: uppercase; color: var(--ds-ink); text-align: left;
  cursor: pointer;
}
.filters .wcpf-field-title .text { font: inherit; color: inherit; }
/* ≈ .filtergroup__chev */
.filters .wcpf-field-title .box-toggle {
  width: 9px; height: 9px; flex: none; border-right: 2px solid var(--ds-ink-4);
  border-bottom: 2px solid var(--ds-ink-4); transform: rotate(45deg); margin-bottom: 3px;
  transition: transform var(--ds-dur) var(--ds-ease);
  background: none; padding: 0; position: static;
}
.filters .wcpf-field-title .box-toggle::before,
.filters .wcpf-field-title .box-toggle::after { display: none; }
.filters .wcpf-box-hide .wcpf-field-title .box-toggle { transform: rotate(-45deg); margin-bottom: 0; }

/* ---- option list ≈ .filtergroup__list ---------------------------------- */
.filters .wcpf-content { display: flex; flex-direction: column; padding: 0 0 var(--ds-s-4); margin: 0; }
.filters .wcpf-box-hide .wcpf-content { display: none; }
.filters .wcpf-checkbox-item { margin: 0; padding: 0; }
.filters .wcpf-item-inner { padding: 0; }

/* ---- option row ≈ .filters label --------------------------------------- */
.filters .wcpf-item-label {
  display: flex; align-items: center; gap: var(--ds-s-3);
  min-height: 34px; cursor: pointer; margin: 0; padding: 0;
  font-family: var(--ds-font-body); font-size: var(--ds-t-body-sm); color: var(--ds-ink-3);
}
.filters .wcpf-item-label:hover { color: var(--ds-ink); }
.filters .wcpf-input-container { display: flex; flex: none; margin: 0; padding: 0; }
.filters .wcpf-title-container { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: var(--ds-s-2); }
.filters .wcpf-title { font: inherit; color: inherit; }

/* ---- checkbox ≈ .filters input[type="checkbox"] ------------------------ */
.filters .wcpf-input-checkbox {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0; padding: 0;
  border: var(--ds-border) solid var(--ds-ink-4); border-radius: 0;
  background: var(--ds-paper-raised);
  display: grid; place-items: center; cursor: pointer;
}
.filters .wcpf-input-checkbox::after {
  content: ""; width: 9px; height: 5px;
  border-left: 2px solid var(--ds-paper); border-bottom: 2px solid var(--ds-paper);
  transform: rotate(-45deg) translateY(-1px); opacity: 0;
}
.filters .wcpf-input-checkbox:checked { background: var(--ds-ink); border-color: var(--ds-ink); }
.filters .wcpf-input-checkbox:checked::after { opacity: 1; }
.filters .wcpf-input-checkbox:focus-visible { outline: 0; box-shadow: var(--ds-focus-ring); }
.filters .wcpf-checkbox-item.checked .wcpf-item-label { color: var(--ds-ink); font-weight: 600; }
.filters .wcpf-checkbox-item.disabled .wcpf-item-label { opacity: 0.45; cursor: default; }

/* ---- per-facet count ≈ .filtercount (QUESTIONS Q-24: styled either way) -- */
.filters .wcpf-title-container [class*="product-count"],
.filters .wcpf-title-container [class*="wcpf-count"] {
  margin-left: auto; font-family: var(--ds-font-ui); font-size: 13px; font-weight: 600; color: var(--ds-ink-5);
}

/* ---- reset ≈ .filters__foot .btn ---------------------------------------- */
.filters .wcpf-field-button { border-top: var(--ds-border) solid var(--ds-rule); padding-top: var(--ds-s-4); }
.filters .wcpf-field-button .wcpf-button,
.filters .wcpf-button {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  min-height: var(--ds-control-h-sm); padding: 0 var(--ds-s-5);
  border: var(--ds-border-strong) solid var(--ds-ink); border-radius: 0; background: transparent;
  font-family: var(--ds-font-ui); font-size: 15px; font-weight: 700;
  letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink);
  cursor: pointer; transition: color var(--ds-dur) var(--ds-ease), background var(--ds-dur) var(--ds-ease);
}
.filters .wcpf-button:hover { background: var(--ds-ink); color: var(--ds-paper); }

/* ---- applied filters ≈ .applied / .applied__item ----------------------- */
/* [wcpf_filter_notes] renders .wcpf-filter-notes > .wcpf-note-list, filled by
   the plugin JS with .wcpf-note-item (+ .remove-filter). Hide the row while
   the list is empty so the grid does not carry a dead label. */
.applied .wcpf-filter-notes { display: contents; }
.applied .wcpf-note-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-s-2); margin: 0; padding: 0; }
.applied .wcpf-note-item {
  display: inline-flex; align-items: center; gap: var(--ds-s-2);
  min-height: 32px; padding: 0 var(--ds-s-2) 0 var(--ds-s-3); margin: 0;
  border: var(--ds-border) solid var(--ds-ink); border-radius: 0;
  font-family: var(--ds-font-ui); font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ds-ink);
  background: var(--ds-paper-raised); cursor: pointer;
}
.applied .wcpf-note-item .remove-filter,
.applied .wcpf-note-item [class*="remove"] {
  font-size: 17px; line-height: 1; color: var(--ds-ink-4); padding: 0 2px; background: none; border: 0;
}
.applied .wcpf-note-item:hover .remove-filter { color: var(--ds-orange-action); }
.applied:has(.wcpf-note-list:empty) { display: none; }

/* ---- plugin loading overlay: keep it quiet on the paper ground ---------- */
.filters .wcpf-status-disabled { opacity: 0.6; }