.csf-dropdown { position: relative; display: inline-block; }
.csf-toggle {
  display:flex; align-items:center; gap:8px;
  border:1px solid #DEDBC7; border-radius:3px;
  padding:5px 12px; background-color:#fffefb; cursor:pointer;
}
.csf-panel {
  position:absolute; z-index:9999; background:#fff; border:1px solid #ddd; border-radius:10px;
  padding:16px; min-width:520px; margin-top:8px; display:none;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.csf-dropdown[data-open="true"] .csf-panel { display:block; }

.csf-columns { display:flex; gap:20px; max-height:70vh; overflow:hidden; }

.csf-left {
  flex:1; max-height:60vh; overflow-y:auto; min-width: 400px;
  border-right:1px solid #ddd; padding:10px; background:#fff;
  overscroll-behavior:contain; scroll-behavior:smooth; scrollbar-gutter:stable;
}
.csf-left::-webkit-scrollbar { width:10px; }
.csf-left::-webkit-scrollbar-track { background:#f5f5f5; border-radius:999px; }
.csf-left::-webkit-scrollbar-thumb { background:#d0d0d0; border-radius:999px; }
.csf-left::-webkit-scrollbar-thumb:hover { background:#bbb; }
.csf-left { scrollbar-width:thin; scrollbar-color:#bbb #f5f5f5; }

.csf-right { width:300px; position:sticky; top:20px; height:fit-content; padding:10px; }

.csf-attribute { border-top:1px solid #eee; padding:8px 0; }
.csf-attribute:first-child { border-top:0; }
.csf-attr-toggle {
  width:100%; text-align:left; background:transparent; border:0; padding:12px 0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; font-weight:600;
}
.csf-terms { display:none; padding:0 0 10px 2px; }
.csf-attribute[data-open="true"] .csf-terms { display:block; }

.csf-term { display:flex; align-items:center; gap:8px; padding:6px 0; }
.csf-term input { margin-right:.35rem; }

.csf-actions { display:flex; justify-content:space-between; gap:10px; padding-top:8px; border-top:1px solid #eee; margin-top:8px; }
.csf-actions .csf-clear, .csf-actions .csf-apply {
  border:1px solid #DEDBC7; border-radius:8px; padding:8px 12px; background:#fff; cursor:pointer;
}

.caf-summary-column { background:#fafafa; border:1px solid #eee; border-radius:12px; padding:12px; }
#caf-active-filters { margin:.5rem 0 1rem; list-style:none; padding:0; }
#caf-active-filters .caf-active-term {
  display:inline-flex; align-items:center; gap:.2rem;
  background:#fff; border:1px solid #eee; border-radius:999px;
  padding:.18rem .5rem; margin:.2rem; font-size:.9rem;
}
#caf-active-filters .caf-remove-term { background:transparent; border:0; cursor:pointer; font-size:1rem; line-height:1; color:#900; }
#caf-active-filters .caf-remove-term:hover { color:#c00; }

.csf-swatch-label { display:inline-flex; align-items:center; margin:6px 6px 0 0; cursor:pointer; }
.csf-swatch {
  width:30px; height:30px; display:inline-block; border:none !important; border-radius:50%; padding:3px; box-sizing:border-box; cursor:pointer;
}
.csf-swatch span { display:block; width:100%; height:100%; border-radius:50%; }
.csf-swatch-label.active .csf-swatch { border:1px solid #fff !important; outline:2px solid #7EB940 !important; }

.csf-panel button:focus-visible,
.csf-panel [role="button"]:focus-visible,
.csf-panel input[type="checkbox"]:focus-visible,
.csf-toggle:focus-visible,
.csf-attr-toggle:focus-visible {
  outline:3px solid rgba(101,168,51,.35);
  outline-offset:2px;
  border-radius:8px;
}
.csf-panel * { -webkit-tap-highlight-color:transparent; }
@media (prefers-reduced-motion: reduce) {
  .csf-left { scroll-behavior:auto; }
}

.csf-price-filter {
  --color-main: #7EB940;   
  --color-focus: #65A833;
  --track-h: 12px;
  --handle-size: 12px;
}

.csf-price-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; font-size:.95rem; }

.csf-price-filter .noUi-target {
  width: 95%;
  background:#EAEAEA !important;
  border:0 !important; box-shadow:none !important;
  border-radius:999px;
  height: var(--track-h);
}
.csf-price-filter .noUi-base,
.csf-price-filter .noUi-connects {
  height:100%; border-radius:999px;
}
.csf-price-filter .noUi-connect {
  background: var(--color-main) !important;
  box-shadow: none !important;
}
.csf-price-filter .noUi-handle {
  width: 20px !important;
  height: 20px !important;
  background: var(--color-main) !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  cursor: grab;
  top: 50% !important;
  transform: translate(-20%, -20%) !important;
}
.csf-price-filter .noUi-handle::before,
.csf-price-filter .noUi-handle::after { display:none !important; }

.csf-price-filter .noUi-touch-area {
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:36px; height:36px; border-radius:50%;
}

.csf-price-filter .noUi-handle:hover { filter: brightness(1.05); }
.csf-price-filter .noUi-state-drag .noUi-handle { cursor: grabbing; }
.csf-price-filter .noUi-handle:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--color-focus);
}

.csf-price-filter [disabled] .noUi-connect { background:#CFCFCF !important; }
.csf-price-filter [disabled] .noUi-handle { background:#CFCFCF !important; cursor:not-allowed; }

.csf-attr-toggle svg {
  transition: transform 180ms ease;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
}

.csf-attribute[data-open="true"] .csf-attr-toggle svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .csf-attr-toggle svg { transition: none; }
}