/**
 * Product filter sidebar — extends the site's native shop-sidebar look.
 * Uses ONLY the site theme variables (--theme-color / --secondary-color / --title-color)
 * so it blends with the rest of the store instead of introducing a new style.
 */

/* --- header row: title + active count + clear --- */
.shop-sidebar .filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--secondary-color);
}

.shop-sidebar .filter-bar__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--title-color);
}

.shop-sidebar .filter-bar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 20px;
    background: var(--secondary-color);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.shop-sidebar .filter-bar__count[data-count="0"] { display: none; }

.shop-sidebar .filter-bar__clear {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: var(--theme-color);
    cursor: pointer;
    transition: color .2s ease;
}

.shop-sidebar .filter-bar__clear:hover { color: var(--secondary-color); text-decoration: underline; }

/* --- clearer checked state for the native round check-box --- */
.shop-sidebar .check-box input:checked + label:before {
    background: var(--secondary-color);
    border-color: var(--theme-color);
    box-shadow: inset 0 0 0 3px #fff;
}

.shop-sidebar .check-box input:checked + label {
    color: var(--theme-color);
    font-weight: 600;
}

/* count badge next to a category/brand label */
.shop-sidebar .category-list li label span {
    font-size: 12px;
    color: #8a9781;
    margin-inline-start: auto;
    padding-inline-start: 6px;
}

/* =====================================================================
   Category tree — clear, professional hierarchy (parent → sub → sub-sub)
   ===================================================================== */
.cat-tree { margin: 0; padding: 0; list-style: none; }
.cat-tree ul { list-style: none; }

.cat-node { position: relative; }

/* one row = checkbox + label (grow) + expand chevron */
.cat-row {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    transition: background .15s ease;
}

.cat-row:hover { background: #f5f7f0; }

/* highlight the currently selected category (graceful: text still bolds without :has) */
.cat-row:has(> .check-box input:checked) { background: #eef2e5; }

.cat-row .check-box { flex: 1; min-width: 0; }

.shop-sidebar .cat-row .check-box label {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.5;
    margin: 0;
}

/* square (multi-select) boxes instead of round radios → less confusing */
.shop-sidebar .cat-tree .check-box label:before {
    border-radius: 5px;
    top: 9px;
}

/* expand/collapse control — a clear, distinct button */
.cat-toggle {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-inline-start: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f3ea;
    border: none;
    border-radius: 8px;
    color: var(--theme-color);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.cat-toggle:hover { background: var(--secondary-color); color: #fff; }
.cat-toggle svg { width: 16px; height: 16px; transition: transform .25s ease; }

.cat-node.is-open > .cat-row .cat-toggle { background: var(--theme-color); color: #fff; }
.cat-node.is-open > .cat-row .cat-toggle svg { transform: rotate(180deg); }

/* children: indented, with a clear guide line + connectors (file-tree feel) */
.cat-children {
    margin: 0;
    padding: 0;
    padding-inline-start: 22px;
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.cat-node.is-open > .cat-children { max-height: 2000px; }

.cat-children::before {
    content: '';
    position: absolute;
    inset-inline-start: 11px;
    top: 0;
    bottom: 14px;
    width: 2px;
    background: #e3e8da;
}

.cat-children > .cat-node > .cat-row::before {
    content: '';
    position: absolute;
    inset-inline-start: -11px;
    top: 19px;
    width: 9px;
    height: 2px;
    background: #e3e8da;
}

.shop-sidebar .cat-children .check-box label { font-size: 13px; }

/* --- price range inputs --- */
.filter-price-fields {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-price-fields input {
    width: 100%;
    height: 42px;
    border: 1px solid #e8ece0;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--title-color);
    background: #f5f7f0;
    text-align: center;
    transition: border-color .2s ease, background .2s ease;
}

.filter-price-fields input:focus {
    border-color: var(--secondary-color);
    background: #fff;
    outline: none;
}

.filter-price-fields .sep { color: #9aa792; }

/* --- apply button uses native .theme-btn, just full width --- */
.shop-sidebar .filter-apply {
    display: block;
    width: 100%;
    margin-top: 6px;
}

/* =====================================================================
   Brands as compact toggle chips (space-saving, clickable)
   ===================================================================== */
.brand-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.brand-chip { margin: 0; cursor: pointer; }
.brand-chip input { display: none; }

.brand-chip span {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #e2e7d8;
    border-radius: 20px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--title-color);
    background: #f7f8f3;
    transition: all .15s ease;
    user-select: none;
    white-space: nowrap;
}

.brand-chip:hover span { border-color: var(--secondary-color); color: var(--theme-color); }

.brand-chip input:checked + span {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
    font-weight: 600;
}

/* collapsed: show only the first 10 chips until "show all" */
.brand-chips.brands-collapsed .brand-chip:nth-child(n+11) { display: none; }

/* =====================================================================
   Dynamic breadcrumb (products page top path)
   ===================================================================== */
#productBreadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

#productBreadcrumb .breadcrumb-item { display: flex; align-items: center; }
#productBreadcrumb .breadcrumb-item::before { content: none !important; }
#productBreadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: '/' !important;
    display: inline-block;
    margin: 0 7px;
    color: #b9c2ac;
}

#productBreadcrumb a { color: var(--theme-color); text-decoration: none; transition: color .15s ease; }
#productBreadcrumb a:hover { color: var(--secondary-color); text-decoration: underline; }
#productBreadcrumb .active { color: var(--title-color); font-weight: 700; }