/**
 * Bee1 Ajax Filters — Frontend CSS
 * Clean, minimal, RTL-ready. No heavy framework.
 *
 * @package Bee1AjaxFilters
 */

/* ── Variables ── */
:root {
    --b1f-accent: #e85c0d;
    --b1f-accent-light: #fdf0e8;
    --b1f-border: #cfcfcf;
    --b1f-text: #111111;
    --b1f-muted: #4a4a4a;
    --b1f-radius: 4px;
    --b1f-transition: 0.18s ease;
    --b1f-check-size: 18px;
    --b1f-swatch-size: 36px;
    --b1f-color-cell-min: 64px;
}

/* ── Wrapper ── */
.bee1-filters {
    font-size: 16px;
    color: var(--b1f-text);
    line-height: 1.45;
}

/* ── Single filter panel ── */
.bee1-filter {
    margin-bottom: 26px;
}

.bee1-filter__title {
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--b1f-border);
    padding-bottom: 10px;
    margin-bottom: 14px;
    color: #0a0a0a;
}

.bee1-filter__toggle {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 0 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--b1f-border) !important;
    border-radius: 0 !important;
    color: #0a0a0a !important;
    font: inherit !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    line-height: 1.3;
    text-align: start;
    text-transform: uppercase !important;
    cursor: pointer;
    box-shadow: none !important;
}

.bee1-filter__toggle:hover,
.bee1-filter__toggle:focus-visible {
    color: var(--b1f-accent) !important;
    background: transparent !important;
}

.bee1-filter__toggle:focus-visible {
    outline: 2px solid var(--b1f-accent);
    outline-offset: 4px;
}

.bee1-filter__toggle-icon {
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.bee1-filter__toggle-icon::before,
.bee1-filter__toggle-icon::after {
    content: '';
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 2px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--b1f-transition), opacity var(--b1f-transition);
}

.bee1-filter__toggle-icon::after {
    transform: rotate(90deg);
}

.bee1-filter__toggle[aria-expanded="true"] .bee1-filter__toggle-icon::after {
    opacity: 0;
    transform: rotate(0);
}

.bee1-filter__content[hidden] {
    display: none !important;
}

/* ── Boxed panel chrome (panel_chrome = boxed_open / boxed_closed) ──
   Everything below is scoped to .bee1-filters--chrome-boxed so sites on the
   default chrome ("none") are pixel-identical after upgrade. */
.bee1-filters--chrome-boxed {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.bee1-filters--chrome-boxed .bee1-active-filters {
    margin: 10px 12px 0;
    border-radius: 8px;
}

.bee1-filters-panel__head {
    appearance: none;
    -webkit-appearance: none;
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--b1f-text) !important;
    font: inherit !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em;
    text-align: start;
    text-transform: none !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background var(--b1f-transition);
}

.bee1-filters-panel__head:hover {
    background: #f7f7f7 !important;
    color: var(--b1f-text) !important;
}

.bee1-filters-panel__head:focus-visible {
    outline: 2px solid var(--b1f-accent);
    outline-offset: -2px;
}

/* Closed panel = a compact filter button; open panel head gets a divider */
.bee1-filters-panel__head[aria-expanded="true"] {
    border-bottom: 1px solid #ececec !important;
}

.bee1-filters-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--b1f-accent);
    color: #fff;
}

.bee1-filters-panel__icon svg {
    display: block;
}

.bee1-filters-panel__title {
    flex: 1 1 auto;
    min-width: 0;
}

.bee1-filters-panel__chevron {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--b1f-transition);
}

.bee1-filters-panel__head[aria-expanded="true"] .bee1-filters-panel__chevron {
    transform: rotate(225deg) translateY(-2px);
}

.bee1-filters-panel__body {
    padding: 4px 16px 14px;
}

.bee1-filters-panel__body[hidden] {
    display: none !important;
}

/* Sections inside the boxed panel: accordion rows with chevrons */
.bee1-filters--chrome-boxed .bee1-filter {
    margin-bottom: 0;
    border-bottom: 1px solid #efefef;
}

.bee1-filters--chrome-boxed .bee1-filter:last-of-type {
    border-bottom: 0;
}

.bee1-filters--chrome-boxed .bee1-filter__toggle {
    padding: 12px 2px !important;
    border-bottom: 0 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

/* Section icon: chevron instead of plus/minus (reads as accordion, not "add") */
.bee1-filters--chrome-boxed .bee1-filter__toggle-icon {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
}

.bee1-filters--chrome-boxed .bee1-filter__toggle-icon::before {
    inset-block-start: 2px;
    inset-inline-start: 1px;
    width: 9px;
    height: 9px;
    background: transparent;
    border-radius: 0;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--b1f-transition);
}

.bee1-filters--chrome-boxed .bee1-filter__toggle-icon::after {
    display: none;
}

.bee1-filters--chrome-boxed .bee1-filter__toggle[aria-expanded="true"] .bee1-filter__toggle-icon::before {
    transform: rotate(225deg) translate(-2px, -2px);
}

.bee1-filters--chrome-boxed .bee1-filter__content {
    padding: 0 2px 12px;
}

.bee1-filters--columns-2 .bee1-filter__list:not(.bee1-filter__list--tree) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
}

.bee1-filters--columns-3 .bee1-filter__list:not(.bee1-filter__list--tree) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 16px;
}

.bee1-filters--columns-4 .bee1-filter__list:not(.bee1-filter__list--tree) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 12px;
}

/* 4 columns hold on narrow drawers too; only the gap tightens. */
@media (max-width: 480px) {
    .bee1-filters--columns-4 .bee1-filter__list:not(.bee1-filter__list--tree) {
        column-gap: 8px;
    }
}

/* ── Checkbox / radio / color list ── */
.bee1-filter__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bee1-filter__item {
    margin-bottom: 6px;
}

.bee1-filter__item a,
.bee1-filter__item button.bee1-filter__control {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #111 !important;
    text-decoration: none;
    transition: color var(--b1f-transition);
    padding: 5px 0;
    cursor: pointer;
    /* reset native button chrome */
    background: none;
    border: 0;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-align: inherit;
    width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

.bee1-term-name {
    color: #111;
    font-size: 15px;
    font-weight: 600;
}

.bee1-filter__item a::before,
.bee1-filter__item button.bee1-filter__control::before {
    content: '';
    display: inline-block;
    width: var(--b1f-check-size);
    height: var(--b1f-check-size);
    border: 2px solid #333;
    border-radius: var(--b1f-radius);
    flex-shrink: 0;
    background: #fff;
    transition: border-color var(--b1f-transition), background var(--b1f-transition);
}

.bee1-filter__item.is-active a::before,
.bee1-filter__item.is-active button.bee1-filter__control::before {
    background: var(--b1f-accent);
    border-color: var(--b1f-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpolyline points='1,5 4,8 11,1' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

.bee1-filter__item a:hover,
.bee1-filter__item button.bee1-filter__control:hover {
    color: var(--b1f-accent);
}

.bee1-filter__item a:hover::before,
.bee1-filter__item button.bee1-filter__control:hover::before {
    border-color: var(--b1f-accent);
}

/* Default treatment for a value that yields zero products: gone, not greyed.
   A struck-through row still costs a shopper a read and a decision, and on a
   category tree it advertises siblings that lead nowhere. The legacy
   dimmed/struck presentation is opt-in via the "Empty filter values" setting. */
.bee1-filter__item.is-empty-hidden,
.bee1-filter.is-empty-hidden {
    display: none !important;
}

.bee1-filter__item.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Unavailable in the current filter context: clearly not selectable. The live
   cross-facet refresh marks an option is-disabled the moment another selection
   makes it yield zero products, so a dead-end combination can never be built. */
.bee1-filter__item.is-disabled a,
.bee1-filter__item.is-disabled button.bee1-filter__control {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    cursor: not-allowed;
}

/* While the open drawer is re-counting after a pending selection, dim the live
   counts so the refresh reads as intentional rather than flicker. */
.bee1-filters-counting .bee1-count {
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

/* Radio */
.bee1-filter__item--radio a::before,
.bee1-filter__item--radio button.bee1-filter__control::before {
    border-radius: 50%;
}

.bee1-filter__item--radio.is-active a::before,
.bee1-filter__item--radio.is-active button.bee1-filter__control::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3' fill='white'/%3E%3C/svg%3E");
    background-size: 10px;
}

/* Count badge */
.bee1-count {
    color: #333 !important;
    font-size: 13px;
    font-weight: 700;
    margin-inline-start: auto;
}

/* ── Colors: clean list rows (not a “color game” grid) ── */
.bee1-filter--color .bee1-filter__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
}

.bee1-filter--color .bee1-filter__list.bee1-filter__list--color-grid,
.bee1-filter--color .bee1-filter__list--color-square,
.bee1-filter--color .bee1-filter__list--color-round {
    display: flex;
    flex-direction: column;
}

/* 1.5.5 — the "Filter value columns" setting also governs COLOUR facets.
   1.3.2 turned colours into one readable row per value, and that rule
   (specificity 0,3,0) silently outranked the columns grid (0,2,0), so a site
   that chose 2-4 columns still got one. One column stays the default; an
   explicit choice is now honoured. */
.bee1-filters--columns-2 .bee1-filter--color .bee1-filter__list.bee1-filter__list--color-grid,
.bee1-filters--columns-2 .bee1-filter--color .bee1-filter__list--color-square,
.bee1-filters--columns-2 .bee1-filter--color .bee1-filter__list--color-round {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bee1-filters--columns-3 .bee1-filter--color .bee1-filter__list.bee1-filter__list--color-grid,
.bee1-filters--columns-3 .bee1-filter--color .bee1-filter__list--color-square,
.bee1-filters--columns-3 .bee1-filter--color .bee1-filter__list--color-round {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bee1-filters--columns-4 .bee1-filter--color .bee1-filter__list.bee1-filter__list--color-grid,
.bee1-filters--columns-4 .bee1-filter--color .bee1-filter__list--color-square,
.bee1-filters--columns-4 .bee1-filter--color .bee1-filter__list--color-round {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 1.5.6 — at 3-4 columns a swatch + side label leaves ~25px for the text and
   Hebrew labels break one letter per line. Stack the label under the swatch
   instead: the classic swatch grid, readable at 67px. 1-2 columns keep the
   side-by-side row. */
.bee1-filters--columns-3 .bee1-filter--color .bee1-filter__list.bee1-filter__list--color-grid .bee1-filter__control,
.bee1-filters--columns-3 .bee1-filter--color .bee1-filter__list--color-square .bee1-filter__control,
.bee1-filters--columns-3 .bee1-filter--color .bee1-filter__list--color-round .bee1-filter__control,
.bee1-filters--columns-4 .bee1-filter--color .bee1-filter__list.bee1-filter__list--color-grid .bee1-filter__control,
.bee1-filters--columns-4 .bee1-filter--color .bee1-filter__list--color-square .bee1-filter__control,
.bee1-filters--columns-4 .bee1-filter--color .bee1-filter__list--color-round .bee1-filter__control {
    /* the base colour-row rule uses !important, so this must match it */
    flex-direction: column !important;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 5px;
}

.bee1-filters--columns-3 .bee1-filter--color .bee1-filter__list.bee1-filter__list--color-grid .bee1-term-name,
.bee1-filters--columns-3 .bee1-filter--color .bee1-filter__list--color-square .bee1-term-name,
.bee1-filters--columns-3 .bee1-filter--color .bee1-filter__list--color-round .bee1-term-name,
.bee1-filters--columns-4 .bee1-filter--color .bee1-filter__list.bee1-filter__list--color-grid .bee1-term-name,
.bee1-filters--columns-4 .bee1-filter--color .bee1-filter__list--color-square .bee1-term-name,
.bee1-filters--columns-4 .bee1-filter--color .bee1-filter__list--color-round .bee1-term-name {
    font-size: 11.5px;
    line-height: 1.25;
    word-break: keep-all;
    overflow-wrap: anywhere;
    hyphens: none;
}


.bee1-filter__item--color {
    margin: 0;
    min-width: 0;
}

.bee1-filter__item--color a,
.bee1-filter__item--color button.bee1-filter__control {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100%;
    min-width: 0;
    text-align: start !important;
    padding: 8px 10px !important;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.bee1-filter__item--color a:hover,
.bee1-filter__item--color button.bee1-filter__control:hover {
    background: #f5f5f5;
    border-color: #e5e5e5;
}

.bee1-filter__item--color.is-active a,
.bee1-filter__item--color.is-active button.bee1-filter__control {
    background: #f0f0f0;
    border-color: #111;
}

.bee1-filter__item--color a::before,
.bee1-filter__item--color button.bee1-filter__control::before {
    display: none !important;
}

.bee1-swatch {
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid #111 !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.06);
    transition: border-color var(--b1f-transition), box-shadow var(--b1f-transition);
    background-color: #ccc;
}

.bee1-filter__list--color-square .bee1-swatch {
    border-radius: 7px;
}

.bee1-filter__list--color-round .bee1-swatch {
    border-radius: 999px;
}

.bee1-filter__item--color.is-active .bee1-swatch {
    border-color: #000 !important;
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 3px #111 !important;
}

.bee1-filter__item--color.is-active .bee1-swatch::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 14px 14px no-repeat;
    background-color: rgba(0, 0, 0, 0.42);
}

.bee1-filter__item--color a:hover .bee1-swatch,
.bee1-filter__item--color button.bee1-filter__control:hover .bee1-swatch {
    border-color: #000 !important;
}

.bee1-swatch-label {
    flex: 1 1 auto;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111 !important;
    width: auto;
    line-height: 1.25;
    overflow-wrap: anywhere;
    opacity: 1 !important;
    text-align: start !important;
}

.bee1-ulg-shell .bee1-filter__item--color.is-active .bee1-swatch,
.bee1-filter__item--color.is-active .bee1-swatch {
    border-color: #000 !important;
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 3px #111 !important;
}

.bee1-ulg-shell .bee1-swatch-label {
    color: #111 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* ── Select dropdown ── */
.bee1-filter__select {
    width: 100%;
    border: 1px solid var(--b1f-border);
    border-radius: var(--b1f-radius);
    padding: 6px 10px;
    font-size: 14px;
    color: var(--b1f-text);
    background: #fff;
    cursor: pointer;
}

.bee1-filter__select:focus {
    outline: 2px solid var(--b1f-accent);
    border-color: var(--b1f-accent);
}

/* ── Price slider ── */
.bee1-price-slider {
    padding: 8px 0;
}

.bee1-price-slider__track {
    position: relative;
    height: 4px;
    background: var(--b1f-border);
    border-radius: 2px;
    margin: 24px 8px;
}

.bee1-price-slider__fill {
    position: absolute;
    height: 100%;
    background: var(--b1f-accent);
    border-radius: 2px;
    pointer-events: none;
}

.bee1-price-slider__handle {
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 2px solid var(--b1f-accent);
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    transition: box-shadow var(--b1f-transition);
    z-index: 2;
}

.bee1-price-slider__handle:active {
    cursor: grabbing;
    box-shadow: 0 2px 8px rgba(232, 92, 13, 0.3);
}

.bee1-price-slider__handle:focus-visible {
    outline: 2px solid var(--b1f-accent);
    outline-offset: 2px;
}

.bee1-price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
}

.bee1-price-inputs input[type="number"] {
    width: 70px;
    border: 1px solid var(--b1f-border);
    border-radius: var(--b1f-radius);
    padding: 4px 6px;
    font-size: 13px;
    text-align: center;
}

.bee1-price-inputs input[type="number"]:focus {
    outline: 2px solid var(--b1f-accent);
    border-color: var(--b1f-accent);
}

.bee1-price-sep {
    color: var(--b1f-muted);
}

/* ── Rating filter ── */
.bee1-filter__item--rating a,
.bee1-filter__item--rating button.bee1-filter__control {
    font-size: 16px;
    letter-spacing: -1px;
    color: #f0a500;
}

.bee1-filter__item--rating a::before,
.bee1-filter__item--rating button.bee1-filter__control::before {
    display: none;
}

.bee1-filter__item--rating.is-active a,
.bee1-filter__item--rating.is-active button.bee1-filter__control {
    color: var(--b1f-accent);
}

/* ── Active filters bar (compact, sidebar-safe) ── */
.bee1-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 0 0 10px;
    padding: 6px 8px;
    background: #f6f6f6;
    border: 1px solid #e8e8e8;
    border-radius: 0;
    box-sizing: border-box;
}

.bee1-active-filters__label {
    flex: 0 0 100%;
    margin: 0;
    padding: 0;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #222;
}

button.bee1-active-filter,
a.bee1-active-filter,
.bee1-active-filter {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    min-height: 26px;
    margin: 0;
    padding: 2px 8px;
    border: 0;
    border-radius: 2px;
    background: #222;
    color: #fff !important;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    text-align: start;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    transition: background var(--b1f-transition), color var(--b1f-transition), border-color var(--b1f-transition);
}

.bee1-active-filter__tax {
    color: #fff;
    opacity: 1;
    font-weight: 600;
    font-size: 10px;
}

.bee1-active-filter__name {
    color: #fff;
    font-weight: 700;
}

.bee1-active-filter__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-inline-start: 1px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    opacity: 1;
}

button.bee1-active-filter:not(.bee1-active-filter--clear-all):hover,
a.bee1-active-filter:not(.bee1-active-filter--clear-all):hover,
.bee1-active-filter:not(.bee1-active-filter--clear-all):hover {
    background: #000;
}

.bee1-active-filters[hidden],
.bee1-active-filter[hidden] {
    display: none !important;
}

button.bee1-active-filter--clear-all,
a.bee1-active-filter--clear-all,
.bee1-active-filter--clear-all {
    order: 99;
    margin: 0 !important;
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #111 !important;
    font-weight: 700;
}

button.bee1-active-filter--clear-all:hover,
a.bee1-active-filter--clear-all:hover,
.bee1-active-filter--clear-all:hover {
    background: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
}

/* Narrow sidebar: keep chips dense, never stretch full width */
.bee1-ulg-filters-panel .bee1-active-filters,
.bee1-filters-panel .bee1-active-filters {
    margin-bottom: 8px;
    padding: 6px;
}

.bee1-ulg-filters-panel button.bee1-active-filter,
.bee1-ulg-filters-panel a.bee1-active-filter,
.bee1-filters-panel button.bee1-active-filter,
.bee1-filters-panel a.bee1-active-filter {
    width: auto !important;
}

/* ── RTL ── */
[dir="rtl"] .bee1-count,
.rtl .bee1-count {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .bee1-price-inputs,
.rtl .bee1-price-inputs {
    direction: rtl;
}

/* ── Collapse toggle ── */
.bee1-collapse-toggle {
    list-style: none;
    margin-top: 6px;
    position: relative;
    z-index: 2;
}

.bee1-collapse-toggle button {
    background: none;
    border: 1px solid var(--b1f-border);
    border-radius: var(--b1f-radius);
    color: var(--b1f-accent);
    cursor: pointer;
    font-size: 12px;
    min-height: 32px;
    padding: 3px 10px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: none;
}

.bee1-collapse-toggle button:hover {
    background: var(--b1f-accent);
    border-color: var(--b1f-accent);
    color: #fff;
}

.bee1-collapse-toggle button:focus-visible {
    background: var(--b1f-accent);
    border-color: var(--b1f-accent);
    color: #fff;
    outline: 2px solid var(--b1f-accent-light);
    outline-offset: 2px;
}

/* ── Subcategory tree ──
   The guide rail hangs from the parent row's checkbox: it sits on the START
   side (right in RTL, left in LTR), centred under the 18px box, and the child
   rows begin just past it. Logical properties give that in both directions from
   one rule. Up to 1.8.6 the rail was drawn on the END side — border-left in RTL,
   border-right in LTR — so it ran down the far edge of the list beside the
   counts, detached from the rows it groups. */
.bee1-filter__subtree {
    list-style: none;
    margin: 2px 0 4px;
    margin-inline-start: 8px;
    padding: 0;
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--b1f-border);
}

.bee1-filter__subtree .bee1-filter__item {
    font-size: 13px;
}

/* End the rail at the last row instead of 6px below it. */
.bee1-filter__subtree > .bee1-filter__item:last-child {
    margin-bottom: 0;
}

/* Level 3 and deeper: indent less each step so a four-level tree still fits a
   phone drawer, and stop the font shrinking past the level-2 size. */
.bee1-filter__subtree .bee1-filter__subtree {
    padding-inline-start: 8px;
}

.bee1-filter__subtree .bee1-filter__subtree .bee1-filter__item {
    font-size: 13px;
}

/* 1.8.8 — per-filter "Sub-category rows: Indent only — no line". No rail: child
   rows start under the parent's name (18px box + 8px gap) and each group gets a
   little air before the next parent. Counts keep their column at the end edge. */
.bee1-filter__list--no-rail .bee1-filter__subtree {
    border-inline-start: 0;
    margin-inline-start: 0;
    padding-inline-start: 26px;
    margin-bottom: 8px;
}

.bee1-filter__list--no-rail .bee1-filter__subtree .bee1-filter__subtree {
    padding-inline-start: 18px;
    margin-bottom: 0;
}

/* ── Floating Apply HUD (draggable glass capsule) ── */
.bee1-filters--apply-apply_button {
    padding-bottom: 0;
}

.bee1-filters-fab {
    position: fixed !important;
    z-index: 100050 !important;
    inset-inline-end: 22px;
    bottom: 28px;
    width: auto;
    max-width: min(360px, calc(100vw - 28px));
    margin: 0 !important;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.bee1-filters-fab[hidden] {
    display: none !important;
}

.bee1-filters-fab--inline {
    position: static !important;
    z-index: auto !important;
    width: 100%;
    max-width: none;
    margin: 24px 0 0 !important;
    touch-action: auto;
    user-select: auto;
    -webkit-user-select: auto;
}

.bee1-filters-fab--inline .bee1-filters-fab__shell {
    border-radius: 14px;
}

.bee1-filters-fab--inline .bee1-filters-fab__handle,
.bee1-filters-fab--inline .bee1-filters-fab__orb {
    display: none !important;
}

.bee1-filters-fab--inline .bee1-filters-fab__body,
.bee1-filters-fab--inline.is-collapsed .bee1-filters-fab__body {
    display: flex !important;
    width: 100%;
}

.bee1-filters-fab__shell {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(12, 12, 14, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 40px rgba(99, 102, 241, 0.12);
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    transition: box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.bee1-filters-fab.is-dragging .bee1-filters-fab__shell {
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 48px rgba(99, 102, 241, 0.2);
    transform: scale(1.02);
}

.bee1-filters-fab.is-dirty .bee1-filters-fab__shell {
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow:
        0 20px 56px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 0 52px rgba(34, 197, 94, 0.18);
}

.bee1-filters-fab__handle {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex: 0 0 28px;
    width: 28px !important;
    min-width: 28px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    cursor: grab;
    color: rgba(255, 255, 255, 0.55) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}

.bee1-filters-fab__handle:active {
    cursor: grabbing;
}

.bee1-filters-fab__grip {
    width: 10px;
    height: 18px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.55) 1.1px, transparent 1.3px);
    background-size: 5px 6px;
    background-repeat: repeat;
    opacity: 0.9;
}

.bee1-filters-fab__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.bee1-filters-fab.is-collapsed .bee1-filters-fab__body,
.bee1-filters-fab.is-collapsed .bee1-filters-fab__handle {
    display: none !important;
}

.bee1-filters-fab__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bee1-filters-fab__pulse {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #64748b;
    flex: 0 0 auto;
    box-shadow: 0 0 0 0 rgba(100, 116, 139, 0.4);
}

.bee1-filters-fab.is-dirty .bee1-filters-fab__pulse {
    background: #4ade80;
    animation: bee1-fab-pulse 1.6s ease-in-out infinite;
}

.bee1-filters-fab.is-counting .bee1-filters-fab__pulse {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: bee1-spin 0.7s linear infinite;
    box-shadow: none;
}

.bee1-filters-fab__status,
.bee1-filters-fab__pending {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bee1-filters-fab.is-dirty .bee1-filters-fab__status {
    color: #fff !important;
}

.bee1-filters-fab__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bee1-filters-fab__reset,
.bee1-filters-fab__apply {
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 999px !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.12s ease;
}

.bee1-filters-fab__reset {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

.bee1-filters-fab__reset:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}

.bee1-filters-fab__apply {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #ffffff 0%, #e8e8ec 100%) !important;
    border: 1px solid #fff !important;
    color: #0a0a0a !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important;
}

.bee1-filters-fab__apply:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: none !important;
    background: #fff !important;
}

.bee1-filters-fab__reset:disabled,
.bee1-filters-fab__apply:disabled {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.bee1-filters-fab__count {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #0a0a0a !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

/* Collapsed pill (when idle / parked aside) — clear "Filter / סינון" activation button.
   Funnel icon + always-visible label + count badge. Hardened against theme overrides.
   Modern, clean, high-contrast. Keeps drag + all existing behavior. */
.bee1-filters-fab__orb {
    display: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: 52px !important;
    min-width: 0 !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 18px 0 16px !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 999px !important;
    background: var(--b1f-accent, #171f3b) !important;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.28),
        0 2px 6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    cursor: grab !important;
    color: #fff !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font: inherit !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}

.bee1-filters-fab.is-collapsed .bee1-filters-fab__shell {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
}

.bee1-filters-fab.is-collapsed .bee1-filters-fab__orb {
    display: inline-flex !important;
}

.bee1-filters-fab__orb:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.34),
        0 4px 10px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.bee1-filters-fab__orb:active,
.bee1-filters-fab.is-dragging .bee1-filters-fab__orb {
    cursor: grabbing !important;
    transform: scale(0.98) !important;
}

.bee1-filters-fab__orb:focus-visible {
    outline: 3px solid #fbc109 !important; /* Bee1 gold */
    outline-offset: 3px !important;
}

/* Dirty state success cue on the pill itself (when collapsed with pending) */
.bee1-filters-fab.is-dirty.is-collapsed .bee1-filters-fab__orb {
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.28),
        0 0 0 3px rgba(56, 161, 105, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.bee1-filters-fab__orb-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    position: relative !important;
    color: #fff !important;
}

.bee1-filters-fab__orb-icon svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    fill: none !important;
}

.bee1-filters-fab__orb-label {
    display: inline-block !important;
    color: #fff !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.bee1-filters-fab__orb-badge {
    position: absolute !important;
    top: -6px !important;
    inset-inline-end: -6px !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: #38a169 !important; /* Bee1 Success */
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    line-height: 1 !important;
    z-index: 2;
}

.bee1-filters.has-pending-filters .bee1-filter__item.is-active > .bee1-filter__control,
.bee1-filters.has-pending-filters .bee1-filter__item.is-active > button.bee1-filter__control {
    color: #000 !important;
}

.bee1-filters.is-applying-filters,
.bee1-ulg-shell.is-applying-filters .bee1-filters {
    opacity: 0.72;
    pointer-events: none;
}

@keyframes bee1-fab-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(74, 222, 128, 0);
    }
}

@media (max-width: 767px) {
    .bee1-filters-fab {
        inset-inline-end: 12px;
        bottom: 16px;
        max-width: calc(100vw - 24px);
    }
}

/* ── Loading state ── */
.bee1-filters.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

.bee1-filters.is-loading::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--b1f-border);
    border-top-color: var(--b1f-accent);
    border-radius: 50%;
    animation: bee1-spin 0.7s linear infinite;
    margin: 12px auto;
}

@keyframes bee1-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Responsive group hiding ── */
@media (max-width: 767px) {
    .bee1-hide-mobile {
        display: none !important;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .bee1-hide-tablet {
        display: none !important;
    }
}
@media (min-width: 1025px) {
    .bee1-hide-desktop {
        display: none !important;
    }
}

/* 1.5.8 — multi-column lists must never push the drawer wider than itself.
   `minmax(0,1fr)` sizes the track, but a nowrap label plus its "(291)" count
   still overflows the item; these let the content wrap inside its column. */
.bee1-filters--columns-3 .bee1-filter__list:not(.bee1-filter__list--tree) .bee1-filter__item,
.bee1-filters--columns-4 .bee1-filter__list:not(.bee1-filter__list--tree) .bee1-filter__item,
.bee1-filters--columns-3 .bee1-filter__list:not(.bee1-filter__list--tree) .bee1-filter__control,
.bee1-filters--columns-4 .bee1-filter__list:not(.bee1-filter__list--tree) .bee1-filter__control,
.bee1-filters--columns-3 .bee1-filter__list:not(.bee1-filter__list--tree) .bee1-term-name,
.bee1-filters--columns-4 .bee1-filter__list:not(.bee1-filter__list--tree) .bee1-term-name {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    /* break between words, never inside a size like "24" or a count like "(291)" */
    overflow-wrap: break-word;
    word-break: keep-all;
}

/* 1.5.9 — the chosen column count is a MAXIMUM for text facets, not a promise.
   A checkbox + label + count needs ~96px; at 3-4 columns inside a 292px drawer
   that is impossible, and forcing it split sizes mid-digit ("24" over two
   lines). Text lists now fit as many readable columns as the container allows,
   up to the setting. COLOUR facets keep the exact count — a swatch with the
   label underneath is readable at 67px, which is what the setting is for. */
.bee1-filters--columns-3 .bee1-filter__list:not(.bee1-filter__list--tree):not([class*="--color"]),
.bee1-filters--columns-4 .bee1-filter__list:not(.bee1-filter__list--tree):not([class*="--color"]) {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

/* ── instant_ajax: in-place product refresh (1.8.0) ─────────────────────────
   Only active while a swap is in flight. Sites on apply_button / immediate
   never get these classes, so nothing here can change their rendering. */

.bee1-ulg-wrap.is-bee1-filtering .bee1-ulg-grid {
    opacity: .45;
    transition: opacity .18s ease-out;
    pointer-events: none;
}

.bee1-ulg-wrap .bee1-ulg-grid {
    transition: opacity .18s ease-out;
}

/* Keep the shopper's place: the grid must not collapse to zero height while
   the new cards are still on the wire. */
.bee1-ulg-wrap.is-bee1-filtering {
    min-height: 40vh;
}

.bee1-filters-no-results {
    grid-column: 1 / -1;
    margin: 0;
    padding: 40px 16px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
}

/* Screen-reader announcements for each refresh. */
.bee1-filters-live {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .bee1-ulg-wrap .bee1-ulg-grid,
    .bee1-ulg-wrap.is-bee1-filtering .bee1-ulg-grid {
        transition: none;
    }
}


/* Leaf-only category list: no nesting, so drop the subtree rail and let it use
   the same column rules as any other checkbox list. */
.bee1-filter__list--flat .bee1-filter__item{ font-size:inherit; }
.bee1-filter__list--flat .bee1-filter__subtree{ display:none; }