/* H3X Product Filters Enhancements
 * Variables (--hc-pfe-*) are emitted inline by PHP from the H3X Settings page.
 */

.hc-pfe-group {
    margin: 0 0 0.5em;
    border-radius: 4px;
    overflow: hidden;
}

.hc-pfe-toggle {
    background: var(--hc-pfe-title-bg, #f7f7f7);
    color: var(--hc-pfe-title-color, inherit);
    border: none;
    padding: 0.6em 0.8em;
    margin: 0;
    font: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
}

/* When the original heading is used as the toggle host, neutralise its
 * default block margin so the group reads as a single unit. */
.hc-pfe-toggle.hc-pfe-toggle--heading,
.hc-pfe-group > h1.hc-pfe-toggle,
.hc-pfe-group > h2.hc-pfe-toggle,
.hc-pfe-group > h3.hc-pfe-toggle,
.hc-pfe-group > h4.hc-pfe-toggle,
.hc-pfe-group > h5.hc-pfe-toggle,
.hc-pfe-group > h6.hc-pfe-toggle {
    margin: 0;
}

.hc-pfe-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.hc-pfe-chevron {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    transition: transform 0.25s ease;
}

.hc-pfe-toggle[aria-expanded="true"] .hc-pfe-chevron {
    transform: rotate(90deg);
}

.hc-pfe-body {
    background: var(--hc-pfe-list-bg, #ffffff);
    color: var(--hc-pfe-list-color, inherit);
    padding: 0.6em 0.8em;
}

.hc-pfe-body[hidden] {
    display: none;
}

/* Push the list colour down through WC's filter markup. WooCommerce sets
 * its own `--wc-product-filter-checkbox-list-label-element` CSS var inline
 * on each checkbox-list block, which would otherwise win over our cascade —
 * !important on the actual text/label classes overrides it cleanly. */
.hc-pfe-body,
.hc-pfe-body a,
.hc-pfe-body label,
.hc-pfe-body .wc-block-components-checkbox__label,
.hc-pfe-body .wc-block-components-filter-submit-button {
    color: var(--hc-pfe-list-color, inherit);
}

.hc-pfe-body .wc-block-product-filter-checkbox-list__label,
.hc-pfe-body .wc-block-product-filter-checkbox-list__text-wrapper,
.hc-pfe-body .wc-block-product-filter-checkbox-list__text,
.hc-pfe-body .wc-block-product-filter-checkbox-list__count,
.hc-pfe-body .wc-block-product-filter-removable-chips__label,
.hc-pfe-body .wc-block-product-filter-price-slider__left,
.hc-pfe-body .wc-block-product-filter-price-slider__right,
.hc-pfe-body input[type="text"],
.hc-pfe-body input[type="number"] {
    color: var(--hc-pfe-list-color, inherit) !important;
}

/* Some WC styles reference the var on the .has-label-element-color block —
 * redirect that var inside our body so any nested rule that still reads it
 * picks up our value instead of WC's preset. */
.hc-pfe-body .wp-block-woocommerce-product-filter-checkbox-list {
    --wc-product-filter-checkbox-list-label-element: var(--hc-pfe-list-color) !important;
}

/* Sticky: applied by JS only above the configured breakpoint, and only to
 * the outermost matching wrapper. !important guards against theme/WC styles
 * that set overflow:visible or max-height:none on the filter wrapper. */
.hc-pfe-sticky {
    position: sticky !important;
    top: var(--hc-pfe-sticky-offset, 80px) !important;
    align-self: flex-start;
    max-height: calc(100vh - var(--hc-pfe-sticky-offset, 80px) - 1rem) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

/* Slim scrollbar inside the sticky panel so it doesn't dominate the sidebar. */
.hc-pfe-sticky::-webkit-scrollbar {
    width: 6px;
}
.hc-pfe-sticky::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}
.hc-pfe-sticky::-webkit-scrollbar-track {
    background: transparent;
}