/* Shared filter theme */
.wc-block-product-filters {
    --jims-filter-accent: #e7e2dc;
    --jims-filter-accent-hover: #d8d0c8;
    --jims-filter-text: #4a433c;
    --jims-filter-surface: #ffffff;
    --jims-filter-drawer: #f1eee9;
    --jims-filter-selected: #5c5148;
    --jims-filter-selected-text: #ffffff;
}

.wc-block-product-filter-chips__item {
    border: 1px solid var(--jims-filter-accent-hover);
    border-radius: 999px;
    background: var(--jims-filter-surface);
    color: var(--jims-filter-text);
}

.wc-block-product-filter-chips__item:is(:focus-visible, :active),
.wc-block-product-filter-chips__item[aria-pressed="true"],
.wc-block-product-filter-chips__item[aria-checked="true"] {
    border-color: var(--jims-filter-accent-hover);
    background: var(--jims-filter-accent);
    color: var(--jims-filter-text);
}

.wc-block-product-filter-removable-chips__item {
    border: 1px solid var(--jims-filter-accent-hover);
    border-radius: 999px;
    background: var(--jims-filter-drawer) !important;
    color: var(--jims-filter-text);
}

.wc-block-product-filter-removable-chips__remove {
    color: var(--jims-filter-text);
    background: transparent !important;
}

.wc-block-product-filter-removable-chips__remove-icon {
    fill: currentColor !important;
}

.wc-block-product-filters__apply,
.wc-block-product-filter-clear-button .wp-element-button {
    border: 1px solid var(--jims-filter-accent) !important;
    border-radius: 999px !important;
    background: var(--jims-filter-accent) !important;
    color: var(--jims-filter-text) !important;
    box-sizing: border-box !important;
    min-height: 42px !important;
}

.wc-block-product-filter-clear-button .wp-element-button {
    background: var(--jims-filter-drawer) !important;
    color: var(--jims-filter-text) !important;
}

.wc-block-product-filter-chips__item[aria-pressed="true"],
.wc-block-product-filter-chips__item[aria-checked="true"],
.wc-block-product-filter-attribute__option.is-active,
.wc-block-product-filter-taxonomy__option.is-active {
    border-color: var(--jims-filter-accent-hover) !important;
    background: var(--jims-filter-drawer) !important;
    color: var(--jims-filter-text) !important;
}

.wc-block-product-filters .wc-block-product-filter-chips__item[aria-checked="true"] {
    border-color: var(--jims-filter-accent-hover) !important;
    background: var(--jims-filter-drawer) !important;
    color: var(--jims-filter-text) !important;
}

/* Keep the price text fields visible without allowing mobile focus/zoom. */
.wc-block-product-filter-price-slider__content input[type="text"] {
    pointer-events: none !important;
}

.wc-block-product-filter-price-slider__content input[type="text"] {
    user-select: none;
    caret-color: transparent;
}

@media (max-width: 781px) {
    /*
     * Archive templates can contain the desktop sidebar filter as well as
     * the dedicated mobile header filter. Two hydrated product-filter
     * instances compete for the same URL/state, so keep only the header
     * instance when it is present.
     */
    body:has(header .wc-block-product-filters) .archive-product .wc-block-product-filters {
        display: none !important;
    }

    html:has(.wc-block-product-filters.is-overlay-opened),
    body:has(.wc-block-product-filters.is-overlay-opened),
    html:has(.wc-block-product-filters.jims-filter-navigation-pending),
    body:has(.wc-block-product-filters.jims-filter-navigation-pending) {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: none !important;
    }

    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
        position: fixed !important;
        inset: 52px 0 0 !important;
        top: 52px !important;
        bottom: 0 !important;
        pointer-events: auto !important;
        background: rgba(95, 95, 95, .35) !important;
        touch-action: none !important;
        -webkit-user-select: none;
    }

    /*
     * A route commit can leave WooCommerce's overlay state stale. Keep that
     * stale overlay from intercepting the page until the next open action.
     */
    .wc-block-product-filters.jims-filter-force-closed
    .wc-block-product-filters__overlay {
        pointer-events: none !important;
        visibility: hidden !important;
    }

    .wc-block-product-filters.jims-filter-force-closed
    .wc-block-product-filters__overlay-dialog {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /*
     * WooCommerce may briefly clear is-overlay-opened while committing a
     * filter route. Keep the existing drawer presentation in place during
     * that commit without toggling its Interactivity state again.
     */
    .wc-block-product-filters.jims-filter-navigation-pending .wc-block-product-filters__overlay {
        position: fixed !important;
        inset: 52px 0 0 !important;
        display: block !important;
        pointer-events: auto !important;
        background: rgba(95, 95, 95, .35) !important;
        touch-action: none !important;
    }

    .wc-block-product-filters.jims-filter-navigation-pending .wc-block-product-filters__overlay-dialog {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        transform: translateY(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        border-radius: 0 0 14px 14px;
        transform: translateY(0) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
        touch-action: none;
    }

    .wc-block-product-filters:not(.is-overlay-opened) .wc-block-product-filters__overlay-dialog {
        transform: translateY(-100%) !important;
    }

    /*
     * Safari can observe the route commit after WooCommerce removes
     * is-overlay-opened. Keep the drawer on screen while the pending state
     * is active; this rule must come after the closed-state transform.
     */
    .wc-block-product-filters.jims-filter-navigation-pending
    .wc-block-product-filters__overlay-dialog {
        transform: translateY(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
        transition: transform .35s ease-out !important;
    }

    /* The bottom Close action replaces the header close control. Keep
       the hydrated header in the DOM but remove the redundant space. */
    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-header {
        display: none !important;
    }

    .wc-block-product-filters__overlay-content {
        box-sizing: border-box;
        position: relative;
        height: 100%;
        min-height: 0;
        padding: .75rem 1rem 10rem;
        overscroll-behavior: contain;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
    }

    .wc-block-product-filter-chips__items {
        gap: 5px;
    }

    .wc-block-product-filter-chips__item {
        min-height: 24px;
        padding: 4px 8px;
        border: 1px solid var(--jims-filter-accent-hover);
        border-radius: 999px;
        background: var(--jims-filter-surface);
        color: var(--jims-filter-text);
        font-size: .75rem;
        line-height: 1.1;
    }

    .wc-block-product-filter-chips__item:is(:focus-visible, :active),
    .wc-block-product-filter-chips__item[aria-pressed="true"],
    .wc-block-product-filter-chips__item[aria-checked="true"] {
        background: var(--jims-filter-accent);
        color: var(--jims-filter-text);
    }

    .wc-block-product-filters__overlay-footer {
        display: flex;
        gap: 8px;
        align-items: stretch;
        padding: .75rem 1rem;
        background: var(--jims-filter-drawer);
        border-top: 1px solid var(--wp--preset--color--gray-200, #e5e5e5);
    }

    .wc-block-product-filters__overlay-footer .wc-block-product-filters__apply,
    .wc-block-product-filters__overlay-footer .wc-block-product-filter-clear-button {
        flex: 1 1 0;
        width: auto !important;
        margin: 0;
    }

    .wc-block-product-filters__overlay-footer .wc-block-product-filter-clear-button .wp-element-button,
    .wc-block-product-filters__overlay-footer .wc-block-product-filters__apply {
        width: 100%;
        min-height: 42px;
        padding: .65rem 1rem;
        border: 1px solid var(--jims-filter-accent);
        border-radius: 999px;
        background: var(--jims-filter-accent);
        color: var(--jims-filter-text);
        font-size: .8rem;
        font-weight: 600;
        text-align: center;
    }

    .wc-block-product-filters__overlay-footer .wc-block-product-filter-clear-button .wp-element-button {
        background: transparent;
        color: var(--jims-filter-text);
    }

    .wc-block-product-filters .wp-block-woocommerce-product-filter-active:not(.wc-block-product-filter--hidden):not([hidden])
    .wc-block-product-filter-removable-chips {
        position: absolute;
        z-index: 100002;
        right: 0;
        bottom: 66px;
        left: 0;
        width: 100%;
        min-height: 42px;
        padding: 6px 1rem;
        background: var(--jims-filter-drawer);
        border-top: 1px solid var(--jims-filter-accent-hover);
        min-width: 0;
    }

    .wc-block-product-filters .wp-block-woocommerce-product-filter-active:not(.wc-block-product-filter--hidden):not([hidden])
    .wc-block-product-filter-removable-chips__items {
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        margin: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
    }

    .wc-block-product-filters .wp-block-woocommerce-product-filter-active:not(.wc-block-product-filter--hidden):not([hidden])
    .wc-block-product-filter-removable-chips__item {
        flex: 0 0 auto;
        font-size: .7rem;
        max-width: 100%;
    }

    .wc-block-product-filters .wp-block-woocommerce-product-filter-active:not(.wc-block-product-filter--hidden):not([hidden])
    .wc-block-product-filter-removable-chips__label {
        max-width: 88px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wc-block-product-filters .wp-block-woocommerce-product-filter-active:not(.wc-block-product-filter--hidden):not([hidden])
    .wc-block-product-filter-removable-chips__remove {
        display: none !important;
    }

    .wc-block-product-filters
    .wp-block-woocommerce-product-filter-clear-button {
        position: absolute;
        z-index: 100003;
        top: auto;
        right: calc(50% + 4px);
        bottom: .75rem;
        left: 1rem;
        width: calc(50% - 1.25rem);
        margin: 0;
    }

    .wc-block-product-filters
    .wp-block-woocommerce-product-filter-clear-button .wp-element-button {
        width: 100%;
        min-height: 42px !important;
        height: 42px;
        padding: .65rem 1rem;
        font-size: .8rem;
        box-sizing: border-box;
    }

    .wc-block-product-filters.jims-filter-navigation-pending
    .wc-block-product-filters__overlay-footer
    .wc-block-product-filters__apply {
        position: absolute;
        top: auto;
        right: 1rem;
        bottom: .75rem;
        width: calc(50% - 1.25rem) !important;
        max-width: none !important;
        min-height: 42px;
        height: 42px;
        margin: 0 !important;
        box-sizing: border-box;
    }

    .wc-block-product-filters__overlay-footer {
        position: absolute;
        z-index: 100002;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 66px;
        box-sizing: border-box;
        padding: .75rem 1rem;
    }

    .wc-block-product-filters.is-overlay-opened
    .wc-block-product-filters__overlay-footer
    .wc-block-product-filters__apply {
        position: absolute;
        top: auto;
        right: 1rem;
        bottom: .75rem;
        width: calc(50% - 1.25rem) !important;
        max-width: none !important;
        min-height: 42px;
        height: 42px;
        margin: 0 !important;
        box-sizing: border-box;
    }

    .wc-block-product-filters__overlay-footer .wc-block-product-filters__apply span {
        display: inline;
    }

    .wc-block-product-filters__overlay-footer .wc-block-product-filters__apply::after {
        content: none;
    }



    /*
     * Keep active chips and Clear Filters in WooCommerce's normal content
     * flow. Fixed footer positioning caused Safari route commits to move the
     * drawer while the hydrated filter tree was being replaced.
     */
    .wc-block-product-filters
    .wp-block-woocommerce-product-filter-active:not(.wc-block-product-filter--hidden):not([hidden])
    .wc-block-product-filter-removable-chips {
        position: static;
        width: auto;
        min-height: 0;
        margin: .75rem 0 0;
        padding: 6px 0;
        border-top: 1px solid var(--jims-filter-accent-hover);
        background: transparent;
    }

    .wc-block-product-filters
    .wp-block-woocommerce-product-filter-clear-button {
        position: static;
        width: auto;
        margin: .5rem 0 0;
    }

    .wc-block-product-filters
    .wp-block-woocommerce-product-filter-clear-button .wp-element-button {
        width: 100%;
    }

    .wc-block-product-filters__overlay-content {
        padding-bottom: 1rem;
    }

    .wc-block-product-filters__overlay-footer,
    .wc-block-product-filters.jims-filter-navigation-pending
    .wc-block-product-filters__overlay-footer {
        position: static;
        width: auto;
        height: auto;
        padding: .75rem 0;
        border-top: 1px solid var(--wp--preset--color--gray-200, #e5e5e5);
    }

    .wc-block-product-filters.is-overlay-opened
    .wc-block-product-filters__overlay-footer
    .wc-block-product-filters__apply,
    .wc-block-product-filters.jims-filter-navigation-pending
    .wc-block-product-filters__overlay-footer
    .wc-block-product-filters__apply {
        position: static;
        width: 100% !important;
        max-width: none !important;
        height: auto;
        min-height: 42px;
        margin: 0 !important;
    }

}

/* Hover fill only on real hover devices, so touch taps and mouse clicks
 * don't leave a deselected chip filled until focus moves elsewhere. */
@media (hover: hover) {
    .wc-block-product-filter-chips__item:hover {
        border-color: var(--jims-filter-accent-hover);
        background: var(--jims-filter-accent);
        color: var(--jims-filter-text);
    }
}

.wc-block-product-filter-chips__item[aria-checked="false"]:focus:not(:focus-visible):not(:hover):not(:active) {
    background: var(--jims-filter-surface);
}

/* Selected chips: dark fill with light text for clear contrast. */
.wc-block-product-filters .wc-block-product-filter-chips__item[aria-checked="true"],
.wc-block-product-filters .wc-block-product-filter-chips__item[aria-pressed="true"],
.wc-block-product-filters .wc-block-product-filter-chips__item[aria-checked="true"]:is(:hover, :focus, :focus-visible, :active) {
    background: var(--jims-filter-selected) !important;
    border-color: var(--jims-filter-selected) !important;
    color: var(--jims-filter-selected-text) !important;
}

.wc-block-product-filters .wc-block-product-filter-chips__item[aria-checked="true"] :is(span, .wc-block-product-filter-chips__label) {
    color: inherit !important;
}