/* ======================================================
   PRODUCT TREE
====================================================== */

.ksco-product-tree{

    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;

    overflow:hidden;

    position:sticky;
    top:30px;

    box-shadow:0 8px 30px rgba(0,0,0,.04);

}

.ksco-product-tree__title{

    padding:18px 22px;

    background:#24395A;
    color:#fff;

    font-size:17px;
    font-weight:700;

    border-bottom:1px solid #24395A;

}

.ksco-tree,
.ksco-tree ul{

    margin:0;
    padding:0;

    list-style:none;

}

.ksco-tree-item{

    margin:0;

}

.ksco-tree-header{

    display:flex;
    align-items:center;

    gap:10px;

    min-height:48px;

    padding:0 18px;

    border-bottom:1px solid #f3f3f3;

    cursor:pointer;

    transition:.25s;

}

.ksco-tree-header:hover{

    background:#f8fafc;

}

.ksco-tree-toggle{

    width:22px;
    height:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:none;
    background:none;

    color:#7b8794;

    cursor:pointer;

    flex-shrink:0;

}

.ksco-tree-space{

    width:22px;

    flex-shrink:0;

}

.ksco-tree-icon{

    width:22px;
    height:22px;

    stroke-width:2.4;

    transition:transform .25s ease;

}

/* RTL */

html[dir="rtl"] .ksco-tree-icon{

    transform:rotate(180deg);

}

html[dir="rtl"] .ksco-tree-item.open > .ksco-tree-header .ksco-tree-icon{

    transform:rotate(270deg);

}

/* LTR */

html[dir="ltr"] .ksco-tree-icon{

    transform:rotate(0deg);

}

html[dir="ltr"] .ksco-tree-item.open > .ksco-tree-header .ksco-tree-icon{

    transform:rotate(90deg);

}

.ksco-tree-title{

    flex:1;

    color:#24395A;

    font-size:13px;
    font-weight:500;
    line-height:1.45;

    font-family:inherit;

}

/* ======================================================
   CHILDREN
====================================================== */

.ksco-tree-children{

    display:none;

}

.ksco-tree-item.open > .ksco-tree-children{

    display:block;

}

/* ======================================================
   CATEGORY INDENTATION
====================================================== */

.ksco-tree-children
> .ksco-tree-item
> .ksco-tree-header{

    padding-inline-start:40px;

}

.ksco-tree-children
.ksco-tree-children
> .ksco-tree-item
> .ksco-tree-header{

    padding-inline-start:60px;

}

.ksco-tree-children
.ksco-tree-children
.ksco-tree-children
> .ksco-tree-item
> .ksco-tree-header{

    padding-inline-start:80px;

}

.ksco-tree-children
.ksco-tree-children
.ksco-tree-children
.ksco-tree-children
> .ksco-tree-item
> .ksco-tree-header{

    padding-inline-start:100px;

}

/* ======================================================
   PRODUCTS
====================================================== */

.ksco-tree-product{

    list-style:none;

}

.ksco-tree-product > .ksco-tree-header{

    border-bottom:none;

}

.ksco-tree-product a{

    flex:1;

    display:block;

    color:#24395A;

    text-decoration:none;

    font-size:13px;
    font-weight:500;
    line-height:1.45;

    font-family:inherit;

    transition:.25s;

}

.ksco-tree-product a:hover{

    color:#1f3d6d;

}

/* ======================================================
   PRODUCT INDENTATION
====================================================== */

.ksco-tree
> .ksco-tree-item
> .ksco-tree-children
> .ksco-tree-product
> .ksco-tree-header{

    padding-inline-start:40px;

}

.ksco-tree
> .ksco-tree-item
> .ksco-tree-children
> .ksco-tree-item
> .ksco-tree-children
> .ksco-tree-product
> .ksco-tree-header{

    padding-inline-start:60px;

}

.ksco-tree
> .ksco-tree-item
> .ksco-tree-children
> .ksco-tree-item
> .ksco-tree-children
> .ksco-tree-item
> .ksco-tree-children
> .ksco-tree-product
> .ksco-tree-header{

    padding-inline-start:80px;

}

.ksco-tree
> .ksco-tree-item
> .ksco-tree-children
> .ksco-tree-item
> .ksco-tree-children
> .ksco-tree-item
> .ksco-tree-children
> .ksco-tree-item
> .ksco-tree-children
> .ksco-tree-product
> .ksco-tree-header{

    padding-inline-start:100px;

}

/* ======================================================
   CURRENT PRODUCT
====================================================== */

.ksco-tree-product.current > .ksco-tree-header{

    background:#edf4ff;

    border-radius:8px;

}

.ksco-tree-product.current > .ksco-tree-header a{

    color:#24395A;

    font-weight:600;

}

html[dir="rtl"] .ksco-tree-product.current > .ksco-tree-header{

    border-right:4px solid var(--ksco-primary);

}

html[dir="ltr"] .ksco-tree-product.current > .ksco-tree-header{

    border-left:4px solid var(--ksco-primary);

}

.ksco-tree-product.current > .ksco-tree-header:hover{

    background:#e5f0ff;

}

/* ======================================================
   CURRENT CATEGORY
====================================================== */

.ksco-tree-item.current-ancestor > .ksco-tree-header{

    background:#fbfcfe;

}

.ksco-tree-item.current-ancestor > .ksco-tree-header .ksco-tree-title{

    color:#24395A;

    font-weight:600;

}

/* ======================================================
   RTL / LTR
====================================================== */

html[dir="rtl"] .ksco-tree-header{

    display:flex;
    align-items:center;

}

html[dir="rtl"] .ksco-tree-title{

    text-align:right;

}

html[dir="rtl"] .ksco-tree-toggle,
html[dir="rtl"] .ksco-tree-space{

    margin-left:12px;
    margin-right:0;

}

html[dir="ltr"] .ksco-tree-header{

    display:flex;
    align-items:center;
    justify-content:flex-start;

    flex-direction:row;

}

html[dir="ltr"] .ksco-tree-title{

    text-align:left;

}

html[dir="ltr"] .ksco-tree-product a{

    text-align:left;

    direction:ltr;

}

html[dir="ltr"] .ksco-tree-toggle,
html[dir="ltr"] .ksco-tree-space{

    margin-right:12px;
    margin-left:0;

}

/* ======================================================
   MOBILE
====================================================== */

@media (max-width:991px){

    .ksco-product-tree{

        position:static;

    }

}

/* ======================================================
   TREE FILTER
====================================================== */

.ksco-product-tree-filter{

    padding:16px 18px;

    background:#fff;

    border-bottom:1px solid #e5e7eb;

}

#ksco-tree-filter{

    width:100%;
    height:42px;

    padding:0 14px;

    border:1px solid #d9dee7;
    border-radius:8px;

    background:#fff;

    color:#24395A;

    font-size:14px;
    font-family:inherit;

    outline:none;

    transition:.25s;

}

#ksco-tree-filter:hover{

    border-color:#24395A;

}

#ksco-tree-filter:focus{

    border-color:#24395A;

    box-shadow:0 0 0 3px rgba(36,57,90,.08);

}

/* ======================================================
   TREE TYPOGRAPHY
====================================================== */

.ksco-product-tree,
.ksco-product-tree *{

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}

.ksco-tree-title,
.ksco-tree-product a{

    font-size:13px;

    line-height:1.45;

    font-weight:500;

    color:#24395A;

}

.ksco-tree-item.current-ancestor > .ksco-tree-header .ksco-tree-title{

    font-weight:600;

}

.ksco-tree-product.current > .ksco-tree-header a{

    font-weight:600;

}

/* ======================================================
   TREE SPACING
====================================================== */

.ksco-tree-header{

    min-height:46px;

}

.ksco-tree-product > .ksco-tree-header{

    min-height:42px;

}

.ksco-tree-header,
.ksco-tree-product > .ksco-tree-header{

    transition:
        background .25s,
        color .25s,
        border-color .25s;

}

/* ======================================================
   ACCESSIBILITY
====================================================== */

.ksco-tree-toggle:focus-visible{

    outline:2px solid var(--ksco-primary);

    outline-offset:2px;

}

.ksco-tree-product a:focus-visible{

    outline:2px solid var(--ksco-primary);

    outline-offset:2px;

}

/* ======================================================
   CLEANUP
====================================================== */

.ksco-tree-header:last-child{

    border-bottom:none;

}

.ksco-tree-product:last-child > .ksco-tree-header{

    border-bottom:none;

}