/* Catalog redesign WP-B (2026-09-28): toolbar filter/sort controls, desktop sidebar, filter bottom sheet / side panel,
   sort sheet + popover, docked filter button, active chips, zero state. Markup: includes/catalog-filters.php,
   behaviour: includes/catalog-filters.js. Motion = transform/opacity only (M1-M14), none under reduced motion. */

:root {
    --b2b-f-pink: #DF1A81;
    --b2b-f-pink-text: #A3125A;
    --b2b-f-tint: #FDE3F0;
    --b2b-f-tint-line: #F3B6D4;
    --b2b-f-ink: #1C1B1F;
    --b2b-f-grey: #5F5F5F;
    --b2b-f-grey2: #6B6B6B;
    --b2b-f-line: #EBEBEB;
    --b2b-f-ease: cubic-bezier(.2, .7, .2, 1);
}

.b2b-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.b2b-tbc button, .b2b-fs button, .b2b-fsb button, .b2b-fdock button, .b2b-sortpop, .b2b-fzero button,
.b2b-fchips button {
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: none;
}

/* ================= toolbar ================= */
.b2b-view-toolbar:has(> .b2b-tbc) {
    flex-wrap: wrap;
    row-gap: 8px;
}

.b2b-view-toolbar > .b2b-count { order: 1; margin-inline-end: auto !important; }
.b2b-view-toolbar > .b2b-tbc { order: 2; }
.b2b-view-toolbar > .b2b-viewtoggle { order: 3; }
.b2b-view-toolbar > .b2b-fchips { order: 4; }

/* "מציג X מתוך Y מוצרים מסוננים" while filters are on */
.b2b-view-toolbar:has(> .b2b-tbc:not([data-active="0"])) .b2b-count::after {
    content: " מסוננים";
}

.b2b-tbc {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.b2b-tb-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--b2b-f-line) !important;
    border-radius: 100px !important;
    background: #fff !important;
    color: var(--b2b-f-ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.b2b-tb-btn:hover { background: #F7F7F7 !important; }
.b2b-tb-btn .b2b-ic { flex: none; }

.b2b-tbc:not([data-active="0"]) .b2b-tb-filter,
.b2b-tbc:not([data-active="0"]) .b2b-tb-side {
    border-color: var(--b2b-f-tint-line) !important;
    color: var(--b2b-f-pink-text) !important;
}

.b2b-fcount {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 100px;
    background: var(--b2b-f-pink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}

.b2b-fcount[hidden] { display: none; }

/* The sidebar toggle exists only with a sidebar (>= 1280) */
.b2b-tb-side { display: none; }
.b2b-tb-side .b2b-fcount { display: none; }
.b2b-tb-side__show { display: none; }
html:is(.b2b-fsb-closed, .b2b-fsb-closing) .b2b-tb-side__hide { display: none; }
html:is(.b2b-fsb-closed, .b2b-fsb-closing) .b2b-tb-side__show { display: inline; }
html:is(.b2b-fsb-closed, .b2b-fsb-closing) .b2b-tb-side .b2b-fcount:not([hidden]) { display: inline-flex; }

@media (min-width: 1280px) {
    .woocommerce:has(> .b2b-fsb) .b2b-tb-side { display: inline-flex; }
    .woocommerce:has(> .b2b-fsb) .b2b-tb-filter { display: none; }
}

/* Active chips (toolbar row, sheet row, zero card) */
.b2b-fchips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 0 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 2px;
    margin: -6px 0;
}

.b2b-fchips::-webkit-scrollbar, .b2b-fs__chips::-webkit-scrollbar { display: none; }

.b2b-fchip {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    margin: 0;
    padding: 0 12px 0 10px;
    border: 0 !important;
    border-radius: 100px !important;
    background: var(--b2b-f-tint) !important;
    color: var(--b2b-f-pink-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap;
    cursor: pointer;
}

.b2b-fchip::before, .b2b-fchip-clear::before {
    content: "";
    position: absolute;
    inset: -6px -2px;
}

.b2b-fchip:hover { background: #FBD0E6 !important; }
.b2b-fchip.is-new { animation: b2b-f-pop .15s ease both; }

.b2b-fchip-clear {
    position: relative;
    flex: none;
    height: 32px;
    margin: 0;
    padding: 0 8px;
    border: 0 !important;
    background: transparent !important;
    color: var(--b2b-f-pink-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* Phones: [סינון][מיון] ........ [grid|list], the count on its own quiet line below */
@media (max-width: 767px) {
    .b2b-view-toolbar:has(> .b2b-tbc) { row-gap: 6px; }
    .b2b-view-toolbar > .b2b-tbc { order: 1; }
    .b2b-view-toolbar:has(> .b2b-tbc) > .b2b-viewtoggle { order: 2; margin-inline-start: auto; }
    .b2b-view-toolbar:has(> .b2b-tbc) > .b2b-count {
        order: 3;
        flex: 1 0 100%;
        margin: 0 !important;
        font-size: 13px;
        line-height: 20px;
    }
    .b2b-view-toolbar > .b2b-fchips { order: 4; }
    .b2b-tb-sort__v { display: none; }
    .b2b-tb-btn { padding: 0 13px; }
}

/* ================= desktop sidebar (>= 1280, right = RTL start) ================= */
.b2b-fsb { display: none; }

@media (min-width: 1280px) {
    html:not(.b2b-fsb-closed) .woocommerce:has(> .b2b-fsb) {
        display: grid !important;
        grid-template-columns: 264px minmax(0, 1fr);
        column-gap: 24px;
        align-items: start;
    }

    /* The template's section clips (overflow:hidden), which makes it the sticky sidebar's scroll box: clip without one. */
    html:not(.b2b-fsb-closed) :is(.elementor-section, .e-con):has(.woocommerce > .b2b-fsb) {
        overflow: clip !important;
    }

    html:not(.b2b-fsb-closed) .woocommerce:has(> .b2b-fsb) > * {
        grid-column: 2;
        min-width: 0;
    }

    html:not(.b2b-fsb-closed) .woocommerce:has(> .b2b-fsb) > .b2b-fsb {
        grid-column: 1;
        grid-row: 1 / span 40;
        display: block;
        position: sticky;
        top: calc(var(--b2b-stack-bottom, 216px) + 12px);
        align-self: start;
        box-sizing: border-box;
        max-height: calc(100vh - var(--b2b-stack-bottom, 216px) - 24px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--b2b-f-line);
        border-radius: 16px;
        background: #fff;
    }

    html body.b2b-ot-has-bar .woocommerce:has(> .b2b-fsb) > .b2b-fsb {
        max-height: calc(100vh - var(--b2b-stack-bottom, 216px) - 24px - var(--b2b-ot-h, 64px));
    }

    /* 1280-1439: 3 cards beside the sidebar; >= 1440: 4 (5 without it). */
    html:not(.b2b-fsb-closed) body :is(.elementor-3684, .elementor-3756) .elementor-wc-products .woocommerce:not(.b2bs-real):has(> .b2b-fsb) > ul.products:not(.b2b-list) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1440px) {
    html:not(.b2b-fsb-closed) body :is(.elementor-3684, .elementor-3756) .elementor-wc-products .woocommerce:not(.b2bs-real):has(> .b2b-fsb) > ul.products:not(.b2b-list) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

.b2b-fsb__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 4px 16px 12px;
}

.b2b-fsb.can-scroll-down { box-shadow: inset 0 -14px 12px -12px rgba(28, 27, 31, .12); }

.b2b-fsb__title {
    margin: 0 !important;
    padding: 14px 0 6px;
    color: var(--b2b-f-ink);
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* ================= groups (sidebar + sheet) ================= */
.b2b-fg {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--b2b-f-line);
}

.b2b-fg:last-child { border-bottom: 0; }
.b2b-fg[hidden] { display: none; }

.b2b-fg__legend {
    float: left; /* legend inside the fieldset flow (no fieldset notch) */
    width: 100%;
    margin: 0;
    padding: 0;
}

.b2b-fg__legend + * { clear: both; }

.b2b-fg--flags .b2b-fg__legend {
    padding: 14px 0 10px;
    color: var(--b2b-f-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.b2b-fg__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--b2b-f-ink) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: start;
    cursor: pointer;
}

.b2b-fg__toggle .b2b-ic--chev {
    color: var(--b2b-f-grey2);
    transition: transform .2s ease;
}

.b2b-fg__toggle[aria-expanded="true"] .b2b-ic--chev { transform: rotate(180deg); }

.b2b-fg__body { padding-bottom: 12px; }
.b2b-fg__body[hidden] { display: none; }
.b2b-fg__body.is-in { animation: b2b-f-in .16s ease-out both; }

/* quick filters: pills */
.b2b-fq-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.b2b-fq {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--b2b-f-line) !important;
    border-radius: 100px !important;
    background: #fff !important;
    color: var(--b2b-f-ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.b2b-fq::before, .b2b-fp::before {
    content: "";
    position: absolute;
    inset: -4px -2px;
}

.b2b-fq[hidden] { display: none; }
.b2b-fq:hover { border-color: #D6D6D6 !important; }

.b2b-fq__tick {
    display: none;
    line-height: 0;
}

.b2b-fq[aria-pressed="true"] {
    border-color: var(--b2b-f-tint-line) !important;
    background: var(--b2b-f-tint) !important;
    color: var(--b2b-f-pink-text) !important;
    font-weight: 600 !important;
}

.b2b-fq[aria-pressed="true"] .b2b-fq__tick {
    display: inline-block;
    animation: b2b-f-tick .12s ease-out both;
}

.b2b-fq.is-zero[aria-pressed="true"], .b2b-fo.is-zero:has(input:checked), .b2b-fp.is-zero:has(input:checked) { opacity: .45; }

/* list rows: real checkboxes */
.b2b-fo {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--b2b-f-ink);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    cursor: pointer;
}

.b2b-fo[hidden], .b2b-fp[hidden], .b2b-fo.is-more:not(.is-shown), .b2b-fp.is-more:not(.is-shown), .b2b-fo.is-filtered, .b2b-fp.is-filtered { display: none !important; }

.b2b-fo input, .b2b-fp input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.b2b-fo__box {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid #BDBDBD;
    border-radius: 6px;
    background: #fff;
    color: #fff;
    box-sizing: border-box;
    transition: background-color .12s ease, border-color .12s ease;
}

.b2b-fo__box .b2b-ic { opacity: 0; transform: scale(.6); transition: opacity .12s ease-out, transform .12s ease-out; }
.b2b-fo input:checked + .b2b-fo__box { border-color: var(--b2b-f-pink); background: var(--b2b-f-pink); }
.b2b-fo input:checked + .b2b-fo__box .b2b-ic { opacity: 1; transform: none; }
.b2b-fo input:focus-visible + .b2b-fo__box, .b2b-fp input:focus-visible ~ .b2b-fp__l { outline: 2px solid var(--b2b-f-pink); outline-offset: 2px; }
.b2b-fo__l { flex: 1 1 auto; min-width: 0; }
.b2b-fo__n { flex: none; color: var(--b2b-f-grey); font-size: 13px; font-variant-numeric: tabular-nums; }
.b2b-fo__n::before { content: "("; }
.b2b-fo__n::after { content: ")"; }

/* pills (variant stickers) */
.b2b-fp-wrap { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }

.b2b-fp {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    cursor: pointer;
}

.b2b-fp__box { display: none; }

.b2b-fp__l {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--b2b-f-line);
    border-radius: 100px;
    background: #fff;
    color: var(--b2b-f-ink);
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}

.b2b-fp input:checked ~ .b2b-fp__l {
    border-color: var(--b2b-f-tint-line);
    background: var(--b2b-f-tint);
    color: var(--b2b-f-pink-text);
    font-weight: 600;
}

.b2b-fg__more {
    min-height: 44px;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--b2b-f-pink-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
}

.b2b-fg__more[hidden] { display: none; }

.b2b-fg__search {
    display: block;
    width: 100%;
    height: 40px !important;
    margin: 0 0 6px !important;
    padding: 0 12px !important;
    border: 1px solid var(--b2b-f-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    font-size: 15px !important;
    box-sizing: border-box;
}

/* ================= sheet (phones) / side panel (768-1279) ================= */
.b2b-fs {
    position: fixed;
    inset: 0;
    z-index: 10000;
    direction: rtl;
}

.b2b-fs[hidden] { display: none; }

.b2b-fs__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 27, 31, .4);
    opacity: 0;
    transition: opacity .2s linear;
}

.b2b-fs__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: 16px 16px 0 0;
    background: #fff;
    box-shadow: 0 -8px 24px rgba(28, 27, 31, .12);
    transform: translateY(100%);
    transition: transform .24s cubic-bezier(.4, 0, 1, 1);
    outline: 0;
}

.b2b-fs.is-open .b2b-fs__backdrop { opacity: 1; }

.b2b-fs.is-open .b2b-fs__panel {
    transform: none;
    transition: transform .28s var(--b2b-f-ease);
}

.b2b-fs__grab {
    flex: none;
    display: flex;
    justify-content: center;
    height: 20px;
    padding-top: 8px;
    box-sizing: border-box;
    touch-action: none;
    cursor: grab;
}

.b2b-fs__handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #D9D9D9;
}

.b2b-fs__head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px 0 6px;
    border-bottom: 1px solid var(--b2b-f-line);
    touch-action: none;
}

.b2b-fs__title {
    margin: 0 !important;
    color: var(--b2b-f-ink);
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    outline: 0;
}

.b2b-fs__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 100px !important;
    background: transparent !important;
    color: var(--b2b-f-ink) !important;
    cursor: pointer;
}

.b2b-fs__x:hover { background: #F5F5F5 !important; }

.b2b-fs__chips {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--b2b-f-line);
}

.b2b-fs__chips[hidden] { display: none; }

.b2b-fs__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;
}

.b2b-fs__foot {
    flex: none;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--b2b-f-line);
    background: #fff;
}

.b2b-fs__clear, .b2b-fs__apply {
    height: 48px;
    margin: 0;
    padding: 0 12px !important;
    border-radius: 100px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer;
}

.b2b-fs__clear {
    border: 1px solid var(--b2b-f-line) !important;
    background: #fff !important;
    color: var(--b2b-f-ink) !important;
}

.b2b-fs__clear:disabled { opacity: .45; cursor: default; }

.b2b-fs__apply {
    border: 0 !important;
    background: var(--b2b-f-pink) !important;
    color: #fff !important;
    font-size: 16px !important;
}

.b2b-fs__apply:hover { background: #C8156F !important; }
.b2b-fs__n { font-variant-numeric: tabular-nums; }
.b2b-fs__n.is-new { animation: b2b-f-fade .15s linear both; }

.b2b-fs__apply[aria-disabled="true"] {
    background: var(--b2b-f-line) !important;
    color: var(--b2b-f-grey2) !important;
    cursor: default;
}

.b2b-fs__dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.b2b-fs__dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: b2b-f-dot 1s ease-in-out infinite; }
.b2b-fs__dots i:nth-child(2) { animation-delay: .15s; }
.b2b-fs__dots i:nth-child(3) { animation-delay: .3s; }

/* sort sheet: radio rows */
.b2b-fs--sort .b2b-fs__body { padding: 6px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }

.b2b-fr {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    margin: 0 !important;
    color: var(--b2b-f-ink);
    font-size: 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--b2b-f-line);
}

.b2b-fr:last-child { border-bottom: 0; }
.b2b-fr input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }

.b2b-fr__dot {
    flex: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid #BDBDBD;
    border-radius: 50%;
    box-sizing: border-box;
    background: #fff;
}

.b2b-fr input:checked + .b2b-fr__dot { border: 6px solid var(--b2b-f-pink); }
.b2b-fr input:checked ~ .b2b-fr__l { font-weight: 600; }
.b2b-fr input:focus-visible + .b2b-fr__dot { outline: 2px solid var(--b2b-f-pink); outline-offset: 2px; }

/* side panel variant */
@media (min-width: 768px) {
    .b2b-fs:not(.b2b-fs--sort) .b2b-fs__panel {
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        width: 400px;
        max-width: 100%;
        max-height: none;
        border-radius: 16px 0 0 16px;
        box-shadow: -8px 0 24px rgba(28, 27, 31, .12);
        transform: translateX(100%);
    }

    .b2b-fs:not(.b2b-fs--sort) .b2b-fs__grab { display: none; }
    .b2b-fs:not(.b2b-fs--sort).is-open .b2b-fs__panel { transform: none; }
}

/* scroll lock without layout shift; the order bar pill hides under an open sheet */
html.b2b-fs-lock {
    overflow: hidden !important;
    scrollbar-gutter: stable;
}

html.b2b-fs-lock body { overflow: hidden !important; }
html.b2b-fs-lock .b2b-ot-pill { visibility: hidden; }

/* ================= sort popover (>= 768) ================= */
.b2b-sortpop {
    position: fixed;
    z-index: 10001;
    width: 220px;
    margin: 0;
    padding: 6px 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(28, 27, 31, .12), 0 0 0 1px rgba(28, 27, 31, .06);
    direction: rtl;
    outline: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .16s ease-out, transform .16s ease-out;
}

.b2b-sortpop[hidden] { display: none; }
.b2b-sortpop.is-open { opacity: 1; transform: none; }

.b2b-sortpop [role="option"] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    color: var(--b2b-f-ink);
    font-size: 15px;
    cursor: pointer;
}

.b2b-sortpop [role="option"] .b2b-ic { color: var(--b2b-f-pink); visibility: hidden; flex: none; }
.b2b-sortpop [role="option"][aria-selected="true"] { font-weight: 600; }
.b2b-sortpop [role="option"][aria-selected="true"] .b2b-ic { visibility: visible; }
.b2b-sortpop [role="option"].is-active, .b2b-sortpop [role="option"]:hover { background: #F5F5F5; }
.b2b-sortpop:focus, .b2b-sortpop:focus-visible { outline: none !important; }
.b2b-sortpop:focus-visible [role="option"].is-active { box-shadow: inset 0 0 0 2px var(--b2b-f-pink); }
/* the dialog title is only the focus landing point on open */
.b2b-fs__title:focus, .b2b-fs__title:focus-visible { outline: none !important; }

/* ================= docked filter/sort (in the sticky breadcrumb row / search chips row) ================= */
.b2b-fdock {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    z-index: 120;
    padding: 3px 24px 3px 7px; /* RTL: 24px fade on the right (start); the 44px hit boxes keep a 10px pill gutter left */
    /* covers what scrolls under it (search chips), fading out towards the row's text */
    background: linear-gradient(to right, #FCFAF4 calc(100% - 24px), rgba(252, 250, 244, 0));
    display: flex;
    align-items: center;
    gap: 0;
    direction: rtl;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s var(--b2b-f-ease), transform .18s var(--b2b-f-ease), visibility 0s linear .18s;
}

.b2b-fdock.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s var(--b2b-f-ease), transform .18s var(--b2b-f-ease), visibility 0s;
}

.b2b-fdock button {
    /* 44x44 hit box (QA D6); the visible 36px pill is the inner span, so the row does not grow */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    margin: 0 -1px;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important; /* a round hit box would lose its corners */
    background: transparent !important;
    color: var(--b2b-f-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none !important;
}

.b2b-fdock__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 36px;
    min-width: 36px;
    padding: 0 12px;
    border: 1px solid var(--b2b-f-line);
    border-radius: 100px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(28, 27, 31, .08);
    box-sizing: border-box;
}

.b2b-fdock__s .b2b-fdock__pill { width: 36px; padding: 0; }
.b2b-fdock button:focus-visible { outline: none !important; }
.b2b-fdock button:focus-visible .b2b-fdock__pill { outline: 2px solid var(--b2b-f-pink); outline-offset: 2px; }
.b2b-fdock[data-active]:not([data-active="0"]) .b2b-fdock__f .b2b-fdock__pill { border-color: var(--b2b-f-tint-line); color: var(--b2b-f-pink-text); }
.b2b-fdock[data-active]:not([data-active="0"]) .b2b-fdock__f { color: var(--b2b-f-pink-text) !important; }

html.b2b-fdock-on .elementor-element-040666c.elementor-sticky--active .woocommerce-breadcrumb {
    max-width: calc(100% - 140px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.b2b-fdock-on #b2bs-page-cats.is-stuck .b2bs-page-chips { padding-inline-end: 132px; }
html.b2b-fdock-on #b2bs-page-cats.is-stuck > .scroll-nav-button.scroll-left { visibility: hidden !important; }

@media (min-width: 1280px) {
    .b2b-fdock { display: none; }
}

/* ================= busy + zero state ================= */
.b2b-f-busy ul.products {
    opacity: .55;
    transition: opacity .15s linear;
}

.b2b-fzero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 4px 0 24px;
    padding: 32px 20px;
    border: 1px solid var(--b2b-f-line);
    border-radius: 8px;
    background: #fff;
    text-align: center;
}

.b2b-fzero__ic { color: #BDBDBD; }

.b2b-fzero__t {
    margin: 4px 0 0 !important;
    color: var(--b2b-f-ink);
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.b2b-fzero__p { margin: 0 !important; color: var(--b2b-f-grey); font-size: 15px; }

.b2b-fzero__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.b2b-fzero__chips:empty { display: none; }

.b2b-fzero__clear {
    height: 44px;
    margin: 8px 0 0;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 100px !important;
    background: var(--b2b-f-pink) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer;
}

.b2b-fzero-box { margin-bottom: 24px; }

/* ================= motion ================= */
@keyframes b2b-f-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes b2b-f-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes b2b-f-tick { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes b2b-f-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes b2b-f-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .b2b-fs__backdrop, .b2b-fs__panel, .b2b-fs.is-open .b2b-fs__panel, .b2b-sortpop, .b2b-fdock, .b2b-fdock.is-on,
    .b2b-fg__toggle .b2b-ic--chev, .b2b-fo__box, .b2b-fo__box .b2b-ic, .b2b-fq, .b2b-fp__l, .b2b-tb-btn, .b2b-f-busy ul.products {
        transition: none !important;
    }
    .b2b-fg__body.is-in, .b2b-fchip.is-new, .b2b-fq__tick, .b2b-fs__n.is-new, .b2b-fs__dots i {
        animation: none !important;
    }
}

/* zero state: the card says it and carries the removable chips; no "מציג 0 מתוך 0", no view toggle (QA D8) */
.b2b-fzero-box > .b2b-view-toolbar > .b2b-fchips,
.b2b-fzero-box > .b2b-view-toolbar > .b2b-count,
.b2b-fzero-box > .b2b-view-toolbar > .b2b-viewtoggle { display: none !important; }

/* >= 1280: active chips stay on the toolbar row when they fit (after the controls), else they wrap to one calm row of
   their own (QA D10). No JS measuring, so no shift on load. */
@media (min-width: 1280px) {
    /* spec order: count . (flex) . chips . controls . grid/list. The chips shrink and scroll inside the row instead of
       wrapping, so a web-font swap can never change the toolbar's height (final QA M4). */
    .b2b-view-toolbar > .b2b-fchips {
        order: 2;
        flex: 0 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0 2px;
    }
    .b2b-view-toolbar > .b2b-tbc { order: 3; }
    .b2b-view-toolbar > .b2b-viewtoggle { order: 4; }
    .b2b-view-toolbar:has(> .b2b-tbc) { flex-wrap: nowrap; }

    /* one fixed width for "הסתר סינון" / "הצג סינון" */
    .woocommerce:has(> .b2b-fsb) .b2b-tb-side { width: 136px; padding: 0 10px; }

    /* Sidebar geometry independent of the font (fallback vs web font): fixed 2-column pill grids, one-line labels with
       ellipsis, px line heights. Nothing in it can re-wrap when Noto Sans Hebrew arrives. */
    .b2b-fsb .b2b-fq-wrap,
    .b2b-fsb .b2b-fp-wrap {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .b2b-fsb .b2b-fq,
    .b2b-fsb .b2b-fp,
    .b2b-fsb .b2b-fp__l {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .b2b-fsb .b2b-fq { justify-content: center; padding: 0 6px !important; font-size: 13px !important; gap: 2px; }
    .b2b-fsb .b2b-fp__l { justify-content: center; padding: 0 8px; font-size: 13px; line-height: 34px; }
    .b2b-fsb .b2b-fq__l, .b2b-fsb .b2b-fp__l, .b2b-fsb .b2b-fo__l, .b2b-fsb .b2b-fg__title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .b2b-fsb .b2b-fq__l { display: block; line-height: 34px; }
    .b2b-fsb .b2b-fo { height: 44px; min-height: 0; line-height: 20px; }
    .b2b-fsb .b2b-fg__toggle { height: 52px; min-height: 0; line-height: 20px !important; }
    .b2b-fsb .b2b-fg--flags .b2b-fg__legend { line-height: 20px; }
    .b2b-fsb .b2b-fsb__title { line-height: 21px !important; }
}

/* search results: the category chips row (b2b-search, 48px) sticks under the header, the sidebar under it */
@media (min-width: 1280px) {
    html:not(.b2b-fsb-closed) body.search .woocommerce:has(> .b2b-fsb) > .b2b-fsb {
        top: calc(var(--b2b-header-bottom, 109px) + 60px);
        max-height: calc(100vh - var(--b2b-header-bottom, 109px) - 72px);
    }
}

/* labels take the control's size: a theme rule on the search page sized the inner spans 18px */
.b2b-fq__l, .b2b-fchip > span, .b2b-tb-btn > span, .b2b-fdock__pill > span { font-size: inherit !important; font-weight: inherit; line-height: inherit; }

/* sheet: the chips row is always present; its empty hint */
.b2b-fs__nochips { color: var(--b2b-f-grey); font-size: 13px; line-height: 20px; white-space: nowrap; }

/* empty archive (no filters): guests on member-only pages, or nothing here right now. The min-height keeps the footer
   below the first screen from the first paint, so the footer's own layout settling is never a visible shift. */
.b2b-fempty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    box-sizing: border-box;
    margin: 8px 0 24px;
    padding: 40px 20px 32px;
    border: 1px solid var(--b2b-f-line);
    border-radius: 16px;
    background: #fff;
    text-align: center;
}
.b2b-fempty__ic { color: #BDBDBD; }
.b2b-fempty__t { margin: 4px 0 0 !important; color: var(--b2b-f-ink); font-size: 18px !important; font-weight: 600 !important; line-height: 1.35 !important; }
.b2b-fempty__p { margin: 0 !important; color: var(--b2b-f-grey); font-size: 15px; line-height: 1.5; }
.b2b-fempty__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin-top: 12px; }
.b2b-fempty__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 160px; height: 48px; padding: 0 24px; box-sizing: border-box;
    border-radius: 100px; background: var(--b2b-f-pink); color: #fff !important;
    font-size: 16px; font-weight: 600; text-decoration: none !important;
}
.b2b-fempty__btn:hover { background: #C8156F; }
.b2b-fempty__link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
    color: var(--b2b-f-pink-text) !important; font-size: 15px; font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px;
}
.b2b-fempty-wrap { min-height: 72vh; } /* reserved space is the page background, the card stays compact */
@media (min-width: 1024px) { .b2b-fempty { max-width: 640px; margin-inline: auto; } }