/* ==================================================================
   Shop, product categories and product search
   (woocommerce/archive-product.php + sidebar.php): toolbar and filters.

   From 992px the filters are a right sidebar card; below, the same markup
   is a bottom sheet (Bootstrap .offcanvas-lg) opened from the toolbar's
   "סינון" button. Tokens, buttons, the checkbox and icons come from
   assets/css/checkout.css (loaded first). No gradients; pink only where
   the customer acts or on a selected state.
   RTL: inline-start is the RIGHT edge.
   ================================================================== */

:root {
    --eb-i-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E");
    --eb-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3C/svg%3E");
}
.eb-ic--sliders { --eb-i: var(--eb-i-sliders); }

/* ---------------------------------------------------------------- page title (the page's one H1) */
.catalog-title {
    margin: 0 0 16px;
    font-family: var(--eb-font);
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem);   /* .secTitle's scale */
    font-weight: 700;
    line-height: 1.25;
    color: var(--eb-ink);
}

/* ---------------------------------------------------------------- toolbar */
.catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 24px;
    padding: 12px 16px;
    border: 1px solid var(--eb-line);
    border-radius: var(--eb-r-lg);
    background: #fff;
    font-family: var(--eb-font);
}
.catalog-toolbar .ct-count { font: 400 15px/22px var(--eb-font); color: var(--eb-text); }
.catalog-toolbar .ct-controls { display: flex; align-items: center; gap: 8px; margin: 0; }
.catalog-toolbar .ct-sort {
    height: 40px;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid var(--eb-line-strong);
    border-radius: var(--eb-r-sm);
    background-color: #fff;
    color: var(--eb-ink);
    font: 400 15px/22px var(--eb-font);
    cursor: pointer;
    transition: border-color var(--eb-ease), box-shadow var(--eb-ease);
}
.catalog-toolbar .ct-sort:hover { border-color: var(--eb-line-hover); }
.catalog-toolbar .ct-sort:focus { outline: none; border-color: var(--eb-pink); box-shadow: var(--eb-focus-ring); }
.catalog-toolbar .ct-view { display: flex; gap: 4px; }
.catalog-toolbar .ct-view-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--eb-line-strong);
    border-radius: var(--eb-r-sm);
    background: #fff;
    color: var(--eb-muted);
    cursor: pointer;
    transition: border-color var(--eb-ease), box-shadow var(--eb-ease), color var(--eb-ease);
}
.catalog-toolbar .ct-view-btn:hover { border-color: var(--eb-line-hover); color: var(--eb-ink); }
.catalog-toolbar .ct-view-btn.is-active { border-color: var(--eb-pink); box-shadow: inset 0 0 0 1px var(--eb-pink); color: var(--eb-ink); }
.catalog-toolbar .ct-view-btn:focus { outline: none; }
.catalog-toolbar .ct-view-btn:focus-visible { box-shadow: var(--eb-focus-ring-btn); }
.catalog-toolbar .ct-view-btn.is-active:focus-visible { box-shadow: inset 0 0 0 1px var(--eb-pink), var(--eb-focus-ring-btn); }

/* "סינון": opens the filters sheet below 992px */
.ct-filter-btn {
    display: none;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--eb-ink);
    border-radius: var(--eb-r-sm);
    background: #fff;
    color: var(--eb-ink);
    font: 600 15px/1 var(--eb-font);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--eb-ease), box-shadow var(--eb-ease);
}
.ct-filter-btn:hover { background: var(--eb-subtle); }
.ct-filter-btn:focus { outline: none; }
.ct-filter-btn:focus-visible { box-shadow: var(--eb-focus-ring-btn); }
.ct-filter-btn__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--eb-ink);
    color: #fff;
    font: 700 12px/1 var(--eb-font);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 991.98px) {
    .ct-filter-btn { display: inline-flex; }
    .catalog-toolbar .ct-count,
    .catalog-toolbar .ct-controls { width: 100%; }
    .catalog-toolbar .ct-sort { flex: 1; }
}

/* ---------------------------------------------------------------- filters */
#ebFilters { color: var(--eb-ink); font-family: var(--eb-font); text-align: start; }
#ebFilters .eb-filters__form { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.eb-filters__title { margin: 0; font: 700 20px/28px var(--eb-font); color: var(--eb-ink); }

.eb-filter + .eb-filter { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--eb-line); }
.eb-filter__title { margin: 0 0 12px; font: 700 16px/24px var(--eb-font); color: var(--eb-ink); }

/* categories: a clean list, the current one marked */
.eb-filter__cats { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.eb-filter__cat {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-inline: -10px;
    padding: 0 10px;
    border-radius: var(--eb-r-sm);
    color: var(--eb-text);
    font: 400 15px/22px var(--eb-font);
    text-decoration: none;
    transition: background-color var(--eb-ease), color var(--eb-ease), box-shadow var(--eb-ease);
}
.eb-filter__cat:hover { background: var(--eb-sunken); color: var(--eb-ink); }
.eb-filter__cat:focus { outline: none; }
.eb-filter__cat:focus-visible { box-shadow: var(--eb-focus-ring-btn); }
.eb-filter__cat[aria-current="page"] { color: var(--eb-ink); font-weight: 700; }
.eb-filter__cat .eb-ic { margin-inline-start: auto; color: var(--eb-pink); }

/* price: two read-outs in the field style + a dual slider */
.eb-price__values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.eb-price__field { display: flex; flex-direction: column; min-width: 0; }
.eb-price__box {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--eb-line-strong);
    border-radius: var(--eb-r-sm);
    background: #fff;
    color: var(--eb-ink);
    font: 600 16px/24px var(--eb-font);
    font-variant-numeric: tabular-nums;
}
.eb-price__slider { position: relative; height: 28px; margin: 16px 11px 0; }
.eb-price__track {
    position: absolute;
    top: 50%;
    inset-inline: -11px;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: var(--eb-line);
}
.eb-price__fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--eb-pink); }
.eb-price__range {
    position: absolute;
    inset: 0 -11px;
    width: calc(100% + 22px);
    height: 28px;
    margin: 0;
    background: none;
    pointer-events: none;   /* only the handles take the pointer: the two ranges overlap */
    -webkit-appearance: none;
    appearance: none;
}
.eb-price__range:focus { outline: none; }
.eb-price__range::-webkit-slider-runnable-track { height: 28px; border: 0; background: transparent; }
.eb-price__range::-moz-range-track { height: 28px; border: 0; background: transparent; }
.eb-price__range::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: 3px;
    border: 2px solid var(--eb-pink);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(18, 18, 18, .2);
    cursor: grab;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
}
.eb-price__range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid var(--eb-pink);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(18, 18, 18, .2);
    cursor: grab;
    pointer-events: auto;
}
.eb-price__range:focus-visible::-webkit-slider-thumb { box-shadow: var(--eb-focus-ring-btn); }
.eb-price__range:focus-visible::-moz-range-thumb { box-shadow: var(--eb-focus-ring-btn); }

/* rating: the shared checkbox, stars as content */
.eb-filter__ratings { display: flex; flex-direction: column; gap: 4px; }
#ebFilters .eb-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin: 0;
    cursor: pointer;
}
#ebFilters .eb-check__input { position: absolute; width: 20px; height: 20px; margin: 0; opacity: 0; }
#ebFilters .eb-check__box { margin-top: 0; }
.eb-stars { display: inline-flex; gap: 2px; }
.eb-star {
    width: 18px;
    height: 18px;
    background-color: var(--eb-line-strong);
    -webkit-mask: var(--eb-i-star) center / contain no-repeat;
    mask: var(--eb-i-star) center / contain no-repeat;
}
.eb-star.is-on { background-color: var(--gold, #F1C840); }

.eb-filters__foot { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.eb-filters__apply { flex: 1; }

/* from 992px: a right sidebar card (Bootstrap shows .offcanvas-lg inline and hides its header) */
@media (min-width: 992px) {
    #ebFilters .eb-filters__form {
        padding: 20px;
        border: 1px solid var(--eb-line);
        border-radius: var(--eb-r-lg);
        background: #fff;
    }
    #ebFilters .eb-filters__body { display: block; }
    #ebFilters .eb-filters__apply { height: 44px; border-color: var(--eb-ink); background: #fff; color: var(--eb-ink); }   /* secondary beside the product cards' own buttons */
    #ebFilters .eb-filters__apply:hover,
    #ebFilters .eb-filters__apply:focus { background: var(--eb-subtle); color: var(--eb-ink); }
}

/* below 992px: a bottom sheet in the delivery modal's language */
@media (max-width: 991.98px) {
    #ebFilters {
        --bs-offcanvas-height: auto;
        --bs-offcanvas-border-width: 0;
        --bs-offcanvas-bg: #fff;
        max-height: 90dvh;
        border-radius: var(--eb-r-xl) var(--eb-r-xl) 0 0;
        box-shadow: var(--eb-shadow-modal);
    }
    #ebFilters .eb-filters__form { flex: 1 1 auto; }
    #ebFilters .eb-filters__head { justify-content: space-between; height: 56px; padding: 8px 8px 0 20px; padding-inline: 20px 8px; }
    #ebFilters .eb-filters__body { flex: 1 1 auto; min-height: 0; padding: 12px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
    .eb-filters__foot {
        margin: 0;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--eb-line);
        background: #fff;
    }
}
body:has(#ebFilters:is(.show, .showing)) .offcanvas-backdrop.show { background-color: #121212; opacity: .48; }
body:has(#ebFilters:is(.show, .showing)) #ht-ctc-chat { display: none; }   /* the floating chat button would sit on the sheet's footer */

/* The fixed sheet must not be held inside a stacking context: the container and the row carry z-index: 1
   to keep the catalogue above the decorative artwork, which still holds without it (they come later in the page). */
.single-product:has(#ebFilters),
.single-product > .row:has(#ebFilters) { z-index: auto; }

/* Empty listing / no search results */
.eb-empty-results { margin: 24px 0; font: 400 17px/1.6 var(--eb-font); color: var(--eb-text); }
.eb-empty-results a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }