/* Product Category Filter - dropdown styles */
.pcf-filter-container.pcf-display-dropdown,
.pcf-filter-container.pcf-display-dropdown * {
  box-sizing: border-box;
}

/* Prevent dropdown panel being clipped by builder wrappers */
.pcf-filter-container.pcf-display-dropdown {
  overflow: visible;
}

.pcf-display-dropdown .pcf-parent-term{
  position: relative;
  overflow: visible;
}

.pcf-display-dropdown .pcf-parent-toggle{
  width:100%;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.pcf-display-dropdown .pcf-caret{
  font-size:0.9em;
  line-height:1;
}

.pcf-display-dropdown .pcf-sub-cats{
  /* In-flow panel so it pushes content (like the Clear Filters button) down */
  position: static;
  display: none;
  width: 100%;
  min-width: 0;
  max-height: 320px;
  overflow: auto;
  padding: 8px 10px;
  margin-top: 6px;
  background: var(--pcf-dropdown-bg, #fff);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}


.pcf-display-dropdown .pcf-parent-term.pcf-open .pcf-sub-cats{
  display:block !important;
}

.pcf-display-dropdown .pcf-parent-term.pcf-open{
  margin-bottom: 12px;
}

.pcf-display-dropdown.pcf-trigger-hover .pcf-parent-term:hover .pcf-sub-cats{
  display:block !important;
}


/* Dropdown options: hide native checkboxes but keep them for form submission */
.pcf-display-dropdown .pcf-option-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}

.pcf-display-dropdown .pcf-option{
  position: relative;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
}

.pcf-display-dropdown .pcf-option:hover{
  background: rgba(0,0,0,0.06);
}

/* Selected state */
.pcf-display-dropdown .pcf-option-input:checked + .pcf-option-text{
  font-weight: 600;
}


/* Actions */
.pcf-display-dropdown .pcf-actions{
  margin-top: 10px;
}

.pcf-display-dropdown .pcf-apply-button{
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.pcf-display-dropdown .pcf-apply-button:hover{
  background: rgba(0,0,0,0.06);
}


/* Nudge/press animation for Clear Filters button when dropdown opens */
.pcf-display-dropdown .pcf-clear-filters.pcf-clear-nudge{
  transform: translateY(1px);
}