.tj-category-navigation {
    --tj-tree-primary: var(--e-global-color-primary, #2E287F);
    --tj-tree-secondary: var(--e-global-color-text, #333333);
    --tj-tree-text: #333333;
    --tj-tree-muted: #6b7280;
    --tj-tree-surface: #ffffff;
    --tj-tree-background: #f4f6fa;
    --tj-tree-border: #e3e6ee;
    --tj-tree-radius: 12px;
    color: var(--tj-tree-text);
    min-width: 0;
    width: 100%;
}

.tj-category-navigation *,
.tj-category-navigation *::before,
.tj-category-navigation *::after {
    box-sizing: border-box;
}

.tj-category-navigation button,
.tj-category-navigation input {
    font: inherit;
}

/* Elementor/theme button presets must not turn the tree controls into large
   filled buttons or force the mobile trigger onto desktop. */
.tj-category-navigation button {
    background-image: none !important;
    box-shadow: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    min-width: 0 !important;
    text-transform: none !important;
}

.tj-category-navigation svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.tj-category-navigation .tj-category-navigation__trigger,
.tj-category-navigation .tj-category-navigation__backdrop {
    display: none !important;
}

.tj-category-navigation__panel {
    background: var(--tj-tree-surface);
    border: 1px solid var(--tj-tree-border);
    border-radius: var(--tj-tree-radius);
    box-shadow: 0 14px 38px rgb(46 40 127 / 8%);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    overflow: hidden;
}

.admin-bar .tj-category-navigation__panel {
    max-height: calc(100vh - 80px);
}

@media (min-width: 769px) {
    .tj-category-navigation {
        position: static;
    }
}

.tj-category-navigation__header {
    align-items: center;
    background: linear-gradient(135deg, var(--tj-tree-primary), #43399d);
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    padding: 18px 18px 17px;
}

.tj-category-navigation__header h2 {
    color: inherit;
    font-size: 19px !important;
    font-weight: 750;
    line-height: 1.25;
    margin: 0;
}

.tj-category-navigation__close {
    align-items: center;
    appearance: none;
    background: rgb(255 255 255 / 10%) !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    cursor: pointer;
    display: none;
    height: 40px !important;
    justify-content: center;
    padding: 0 !important;
    min-height: 0 !important;
    width: 40px !important;
}

.tj-category-navigation__close svg {
    height: 20px;
    width: 20px;
}

.tj-category-navigation__search {
    align-items: center;
    background: var(--tj-tree-surface);
    display: flex;
    flex: 0 0 auto;
    margin: 0 0 9px;
    padding: 0;
    position: relative;
}

.tj-category-navigation__search > svg {
    color: #8a909a;
    height: 18px;
    left: 13px;
    pointer-events: none;
    position: absolute;
    width: 18px;
}

.tj-category-navigation__search input[type="search"] {
    appearance: none;
    background: var(--tj-tree-background);
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
    color: var(--tj-tree-secondary);
    font-size: 13px !important;
    height: 42px;
    margin: 0;
    max-width: none;
    outline: 0;
    padding: 0 42px 0 40px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    width: 100%;
}

.tj-category-navigation__search input[type="search"]:focus {
    background: #ffffff;
    border-color: var(--tj-tree-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tj-tree-primary) 14%, transparent);
}

.tj-category-navigation__search input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.tj-category-navigation__clear {
    align-items: center;
    appearance: none;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #858b95;
    cursor: pointer;
    display: flex !important;
    height: 32px !important;
    justify-content: center;
    padding: 0 !important;
    position: absolute;
    right: 6px;
    min-height: 0 !important;
    width: 32px !important;
}

.tj-category-navigation__clear[hidden] {
    display: none !important;
}

.tj-category-navigation__clear:hover,
.tj-category-navigation__clear:focus-visible {
    background: #e9ebef !important;
    color: var(--tj-tree-secondary) !important;
}

.tj-category-navigation__clear svg {
    height: 16px;
    width: 16px;
}

.tj-category-navigation__scroll {
    overscroll-behavior: contain;
    overflow-y: auto;
    padding: 16px 12px;
    scrollbar-color: #c8ccd3 transparent;
    scrollbar-width: thin;
}

.tj-category-navigation__list-scroll {
    min-width: 0;
}

.tj-category-navigation__categories,
.tj-category-navigation__brands,
.tj-category-navigation__facet {
    min-width: 0;
}

.tj-category-navigation__categories h3,
.tj-category-navigation__brands h3,
.tj-category-navigation__facet h3 {
    color: var(--tj-tree-primary);
    font-size: 13px !important;
    font-weight: 750;
    letter-spacing: .06em;
    line-height: 1.3;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.tj-category-tree__level {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tj-category-tree__item {
    list-style: none !important;
    margin: 1px 0 !important;
    padding: 0 !important;
}

.tj-category-tree__item[hidden],
.tj-category-tree__children[hidden] {
    display: none !important;
}

.tj-category-tree__row {
    align-items: center;
    border-radius: 8px;
    display: flex;
    gap: 3px;
    min-height: 42px;
    min-width: 0;
    position: relative;
    transition: background-color .16s ease, color .16s ease;
}

.tj-category-tree__row:hover {
    background: var(--tj-tree-background);
}

.tj-category-tree__link {
    align-items: center;
    color: var(--tj-tree-text) !important;
    display: flex;
    flex: 1 1 auto;
    font-size: 14px !important;
    font-weight: 560;
    gap: 8px;
    line-height: 1.35;
    min-width: 0;
    padding: 10px 5px 10px 10px;
    text-decoration: none !important;
    white-space: normal !important;
}

.tj-category-tree__level--0 > .tj-category-tree__item > .tj-category-tree__row .tj-category-tree__link {
    font-weight: 600;
}

.tj-category-tree__link span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal !important;
}

.tj-category-tree__link small {
    align-items: center;
    background: #f0f1f4;
    border-radius: 999px;
    color: var(--tj-tree-muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 10px !important;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    min-width: 23px;
    padding: 5px 6px;
}

.tj-category-tree__expand {
    align-items: center;
    appearance: none;
    background: transparent !important;
    border: 0 !important;
    border-radius: 7px !important;
    color: #808692 !important;
    cursor: pointer;
    display: flex !important;
    flex: 0 0 34px !important;
    height: 34px !important;
    justify-content: center;
    margin-right: 4px;
    min-height: 0 !important;
    padding: 0 !important;
    width: 34px !important;
}

.tj-category-tree__expand:hover,
.tj-category-tree__expand:focus-visible {
    background: #e8eaf0 !important;
    color: var(--tj-tree-secondary) !important;
    outline: none;
}

.tj-category-tree__expand svg {
    height: 17px;
    transition: transform .2s ease;
    width: 17px;
}

.tj-category-tree__expand[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

.tj-category-tree__children {
    border-left: 1px solid #e4e6eb;
    margin: 2px 0 5px 18px;
    padding-left: 7px;
}

.tj-category-tree__children .tj-category-tree__row {
    min-height: 38px;
}

.tj-category-tree__children .tj-category-tree__link {
    font-size: 14px !important;
    padding-bottom: 8px;
    padding-top: 8px;
}

.tj-category-tree__item.is-current > .tj-category-tree__row {
    background: color-mix(in srgb, var(--tj-tree-primary) 9%, white);
    box-shadow: inset 3px 0 0 var(--tj-tree-primary);
}

.tj-category-tree__item.is-current > .tj-category-tree__row .tj-category-tree__link {
    color: var(--tj-tree-primary) !important;
    font-weight: 750;
}

.tj-category-tree__item.is-current > .tj-category-tree__row .tj-category-tree__link small {
    background: var(--tj-tree-primary);
    color: #ffffff;
}

.tj-category-tree__item.is-current-path:not(.is-current) > .tj-category-tree__row .tj-category-tree__link {
    color: var(--tj-tree-primary) !important;
    font-weight: 700;
}

.tj-category-navigation__brands {
    border-top: 1px solid var(--tj-tree-border);
    margin: 20px 0 0;
    padding: 20px 0 0;
}

.tj-category-navigation__brands[hidden],
.tj-category-brand__item[hidden] {
    display: none !important;
}

.tj-category-brand__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tj-category-brand__item {
    list-style: none !important;
    margin: 1px 0 !important;
    padding: 0 !important;
}

.tj-category-brand__item a {
    align-items: center;
    border-radius: 8px;
    color: var(--tj-tree-text) !important;
    display: flex;
    font-size: 14px !important;
    font-weight: 560;
    gap: 8px;
    line-height: 1.35;
    min-height: 42px;
    padding: 10px;
    text-decoration: none !important;
}

.tj-category-brand__item a:hover,
.tj-category-brand__item a:focus-visible {
    background: var(--tj-tree-background);
    color: var(--tj-tree-primary) !important;
}

.tj-category-brand__item a span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal !important;
}

.tj-category-brand__item a small {
    align-items: center;
    background: #f0f1f4;
    border-radius: 999px;
    color: var(--tj-tree-muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 10px !important;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    min-width: 23px;
    padding: 5px 6px;
}

.tj-category-brand__item.is-current a {
    background: color-mix(in srgb, var(--tj-tree-primary) 9%, white);
    box-shadow: inset 3px 0 0 var(--tj-tree-primary);
    color: var(--tj-tree-primary) !important;
    font-weight: 750;
}

.tj-category-brand__item.is-current a small {
    background: var(--tj-tree-primary);
    color: #ffffff;
}

.tj-category-navigation__facet {
    border-top: 1px solid var(--tj-tree-border);
    margin: 20px 0 0;
    padding: 20px 0 0;
}

.tj-category-facet__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tj-category-facet__item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tj-category-facet__item a {
    background: var(--tj-tree-background);
    border: 1px solid var(--tj-tree-border);
    border-radius: 8px;
    color: var(--tj-tree-text) !important;
    display: inline-flex;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.25;
    min-height: 34px;
    padding: 8px 11px;
    text-decoration: none !important;
}

.tj-category-facet__item a:hover,
.tj-category-facet__item a:focus-visible {
    border-color: var(--tj-tree-primary);
    color: var(--tj-tree-primary) !important;
}

.tj-category-facet__item.is-current a {
    background: var(--tj-tree-primary);
    border-color: var(--tj-tree-primary);
    color: #ffffff !important;
}

.tj-category-navigation__empty {
    color: var(--tj-tree-muted);
    font-size: 13px !important;
    margin: 0;
    padding: 28px 12px;
    text-align: center;
}

.tj-category-navigation__empty[hidden] {
    display: none;
}

@media (min-width: 769px) {
    .tj-category-navigation__panel,
    .admin-bar .tj-category-navigation__panel {
        background: transparent;
        border: 0;
        box-shadow: none;
        max-height: none;
        overflow: visible;
    }

    .tj-category-navigation__header {
        display: none;
    }

    .tj-category-navigation__scroll {
        display: flex;
        flex-direction: column;
        gap: 16px;
        overflow: visible;
        padding: 0;
    }

    .tj-category-navigation__categories,
    .tj-category-navigation__brands,
    .tj-category-navigation__facet {
        background: var(--tj-tree-surface);
        border: 1px solid var(--tj-tree-border);
        border-radius: var(--tj-tree-radius);
        box-shadow: 0 14px 38px rgb(46 40 127 / 8%);
        display: flex;
        flex-direction: column;
        margin: 0;
        max-height: 55vh;
        min-height: 0;
        overflow: hidden;
        padding: 16px 12px;
    }

    .tj-category-navigation__brands {
        max-height: 38vh;
    }

    .tj-category-navigation__facet {
        max-height: 30vh;
    }

    .tj-category-facet__list {
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-color: #c8ccd3 transparent;
        scrollbar-width: thin;
    }

    .tj-category-navigation__list-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-color: #c8ccd3 transparent;
        scrollbar-width: thin;
    }
}

@media (max-width: 768px) {
    .tj-category-navigation__categories h3 {
        display: none;
    }

    html.tj-category-tree-lock {
        overflow: hidden;
    }

    .tj-category-navigation .tj-category-navigation__trigger {
        align-items: center;
        appearance: none;
        background: var(--tj-tree-primary) !important;
        border: 0 !important;
        border-radius: var(--tj-tree-radius) !important;
        color: #ffffff !important;
        cursor: pointer;
        display: flex !important;
        font-size: 14px !important;
        font-weight: 700;
        gap: 10px;
        justify-content: center;
        min-height: 48px !important;
        padding: 11px 16px !important;
        width: 100% !important;
    }

    .tj-category-navigation__trigger svg {
        height: 20px;
        width: 20px;
    }

    .tj-category-navigation .tj-category-navigation__backdrop {
        appearance: none;
        background: rgb(10 13 31 / 58%) !important;
        border: 0 !important;
        display: block !important;
        inset: 0;
        opacity: 0;
        padding: 0 !important;
        pointer-events: none;
        position: fixed;
        transition: opacity .24s ease;
        visibility: hidden;
        z-index: 100000;
    }

    .tj-category-navigation__panel {
        border: 0;
        border-radius: 0 16px 16px 0;
        bottom: 0;
        box-shadow: 18px 0 50px rgb(0 0 0 / 20%);
        left: 0;
        max-height: none;
        position: fixed;
        top: 0;
        transform: translateX(-104%);
        transition: transform .26s ease;
        width: min(88vw, 390px);
        z-index: 1005555001;
    }

    .admin-bar .tj-category-navigation__panel {
        max-height: none;
        top: 46px;
    }

    .tj-category-navigation__close {
        display: flex !important;
    }

    .tj-category-navigation.is-mobile-open .tj-category-navigation__backdrop {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    .tj-category-navigation.is-mobile-open .tj-category-navigation__panel {
        transform: translateX(0);
    }

    .tj-category-navigation__scroll {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .tj-category-navigation__panel,
    .tj-category-navigation__backdrop,
    .tj-category-tree__expand svg {
        transition: none;
    }
}

