/*==================================================
    TIPA MART
    SHOP SIDEBAR
    CHECKBOX CATEGORY FILTER
    GROGIN-INSPIRED STYLE
==================================================*/


/*==================================================
    SIDEBAR
==================================================*/

.shop-sidebar{

    width:100%;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:30px;

}


/*==================================================
    WIDGET
==================================================*/

.shop-widget{

    width:100%;

    background:#ffffff;

    border:1px solid #E8E8E8;

    border-radius:6px;

    overflow:hidden;

}


/*==================================================
    WIDGET TITLE
==================================================*/

.shop-widget__title{

    margin:0;

    padding:18px 20px;

    color:#222222;

    font-size:16px;

    font-weight:700;

    line-height:1.3;

    border-bottom:1px solid #E8E8E8;

}


/*==================================================
    FILTER FORM
==================================================*/

.shop-filter-form{

    width:100%;

}


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

.shop-category-all{

    width:100%;

    padding:6px 0 0;

}


/*==================================================
    CATEGORY LIST
==================================================*/

.shop-categories{

    width:100%;

    margin:0;

    padding:6px 0;

}


/*==================================================
    CATEGORY TREE
==================================================*/

.shop-category-tree{

    list-style:none;

    margin:0;

    padding:0;

}


/*==================================================
    CATEGORY ITEM
==================================================*/

.shop-category-item{

    width:100%;

    margin:0;

    padding:0;

}


/*==================================================
    CATEGORY CHECKBOX LABEL
==================================================*/

.shop-category-checkbox{

    position:relative;

    display:flex;

    align-items:center;

    width:100%;

    min-width:0;

    gap:10px;

    padding:10px 20px;

    color:#555555;

    font-size:13px;

    font-weight:500;

    line-height:1.4;

    cursor:pointer;

    user-select:none;

    transition:

        color .2s ease,

        background .2s ease,

        padding .2s ease;

}


/*==================================================
    HIDDEN NATIVE CHECKBOX
==================================================*/

.shop-category-checkbox input{

    position:absolute;

    width:1px;

    height:1px;

    opacity:0;

    pointer-events:none;

}


/*==================================================
    CUSTOM CHECKBOX
==================================================*/

.shop-category-checkmark{

    position:relative;

    flex:0 0 17px;

    width:17px;

    height:17px;

    border:1px solid #D5D5D5;

    border-radius:3px;

    background:#ffffff;

    transition:

        background .2s ease,

        border-color .2s ease,

        box-shadow .2s ease;

}


/*==================================================
    CHECKMARK
==================================================*/

.shop-category-checkmark::after{

    content:"";

    position:absolute;

    left:5px;

    top:2px;

    width:5px;

    height:9px;

    border:solid #ffffff;

    border-width:0 2px 2px 0;

    transform:rotate(45deg) scale(0);

    opacity:0;

    transition:

        transform .15s ease,

        opacity .15s ease;

}


/*==================================================
    CHECKED
==================================================*/

.shop-category-checkbox input:checked
~ .shop-category-checkmark{

    background:#082C6C;

    border-color:#082C6C;

}


.shop-category-checkbox input:checked
~ .shop-category-checkmark::after{

    transform:rotate(45deg) scale(1);

    opacity:1;

}


/*==================================================
    KEYBOARD FOCUS
==================================================*/

.shop-category-checkbox input:focus-visible
~ .shop-category-checkmark{

    box-shadow:

        0 0 0 3px
        rgba(8,44,108,.12);

}


/*==================================================
    CATEGORY NAME
==================================================*/

.shop-category-name{

    flex:1 1 auto;

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:inherit;

}


/*==================================================
    CATEGORY COUNT
==================================================*/

.shop-category-count{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:25px;

    height:25px;

    padding:0 7px;

    border-radius:50%;

    background:#F3F3F3;

    color:#777777;

    font-size:11px;

    font-weight:600;

}


/*==================================================
    CHECKED CATEGORY COUNT
==================================================*/

.shop-category-checkbox
input:checked
~ .shop-category-count{

    background:#F5B51D;

    color:#082C6C;

}


/*==================================================
    HOVER
==================================================*/

.shop-category-checkbox:hover{

    color:#082C6C;

    background:#F8FAFD;

    padding-left:24px;

}


/*==================================================
    CHILD CATEGORIES
==================================================*/

.shop-category-children{

    width:100%;

    margin:0;

    padding:0;

}


/*==================================================
    LEVEL 1
==================================================*/

.shop-category-tree--level-1
.shop-category-checkbox{

    padding-left:42px;

    font-size:12px;

}


.shop-category-tree--level-1
.shop-category-checkbox:hover{

    padding-left:46px;

}


/*==================================================
    LEVEL 2
==================================================*/

.shop-category-tree--level-2
.shop-category-checkbox{

    padding-left:62px;

    font-size:12px;

}


.shop-category-tree--level-2
.shop-category-checkbox:hover{

    padding-left:66px;

}


/*==================================================
    LEVEL 3
==================================================*/

.shop-category-tree--level-3
.shop-category-checkbox{

    padding-left:82px;

    font-size:12px;

}


.shop-category-tree--level-3
.shop-category-checkbox:hover{

    padding-left:86px;

}


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

.shop-category-checkbox--all{

    font-weight:600;

}


.shop-category-checkbox--all
.shop-category-checkmark{

    border-color:#BDBDBD;

}


/*==================================================
    PRICE FILTER
==================================================*/

.shop-sidebar-price{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:18px 20px 20px;

    border-top:1px solid #E8E8E8;

}


/*==================================================
    PRICE FILTER TITLE
==================================================*/

.shop-filter-subtitle{

    margin:0 0 3px;

    color:#222222;

    font-size:14px;

    font-weight:700;

    line-height:1.3;

}


/*==================================================
    PRICE INPUT
==================================================*/

.shop-sidebar-price input{

    display:block;

    width:100%;

    height:42px;

    padding:0 12px;

    border:1px solid #DDDDDD;

    border-radius:4px;

    background:#ffffff;

    color:#222222;

    font-family:inherit;

    font-size:13px;

    outline:none;

    transition:border-color .2s ease;

}


.shop-sidebar-price input::placeholder{

    color:#999999;

}


.shop-sidebar-price input:focus{

    border-color:#082C6C;

}


/*==================================================
    REMOVE NUMBER ARROWS
==================================================*/

.shop-sidebar-price input::-webkit-outer-spin-button,
.shop-sidebar-price input::-webkit-inner-spin-button{

    margin:0;

    -webkit-appearance:none;

}


.shop-sidebar-price input[type="number"]{

    -moz-appearance:textfield;

}


/*==================================================
    APPLY FILTER BUTTON
==================================================*/

.shop-filter-button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:calc(100% - 40px);

    height:42px;

    margin:0 20px 20px;

    padding:0 15px;

    border:none;

    border-radius:4px;

    background:#082C6C;

    color:#ffffff;

    font-family:inherit;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

    transition:

        background .2s ease,

        color .2s ease;

}


.shop-filter-button:hover{

    background:#F5B51D;

    color:#082C6C;

}


/*==================================================
    TABLET
==================================================*/

@media (max-width:992px){

    .shop-sidebar{

        display:grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:20px;

    }


    .shop-widget{

        min-width:0;

    }

}


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

@media (max-width:768px){

    .shop-sidebar{

        display:flex;

        flex-direction:column;

        gap:16px;

    }


    .shop-widget__title{

        padding:15px 18px;

        font-size:15px;

    }


    .shop-category-checkbox{

        padding:10px 18px;

    }


    .shop-category-checkbox:hover{

        padding-left:22px;

    }


    .shop-category-tree--level-1
    .shop-category-checkbox{

        padding-left:38px;

    }


    .shop-category-tree--level-1
    .shop-category-checkbox:hover{

        padding-left:42px;

    }


    .shop-category-tree--level-2
    .shop-category-checkbox{

        padding-left:56px;

    }


    .shop-category-tree--level-2
    .shop-category-checkbox:hover{

        padding-left:60px;

    }


    .shop-category-tree--level-3
    .shop-category-checkbox{

        padding-left:74px;

    }


    .shop-category-tree--level-3
    .shop-category-checkbox:hover{

        padding-left:78px;

    }


    .shop-sidebar-price{

        padding:16px 18px 18px;

    }


    .shop-filter-button{

        width:calc(100% - 36px);

        margin:0 18px 18px;

    }

}


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

@media (max-width:576px){

    .shop-sidebar{

        gap:12px;

    }


    .shop-widget{

        border-radius:5px;

    }


    .shop-widget__title{

        padding:14px 16px;

        font-size:14px;

    }


    .shop-category-checkbox{

        gap:9px;

        padding:9px 16px;

        font-size:12px;

    }


    .shop-category-checkbox:hover{

        padding-left:20px;

    }


    .shop-category-checkmark{

        flex-basis:16px;

        width:16px;

        height:16px;

    }


    .shop-category-checkmark::after{

        left:5px;

        top:2px;

        width:4px;

        height:8px;

    }


    .shop-category-count{

        min-width:23px;

        height:23px;

        font-size:10px;

    }


    .shop-category-tree--level-1
    .shop-category-checkbox{

        padding-left:34px;

    }


    .shop-category-tree--level-1
    .shop-category-checkbox:hover{

        padding-left:38px;

    }


    .shop-category-tree--level-2
    .shop-category-checkbox{

        padding-left:50px;

    }


    .shop-category-tree--level-2
    .shop-category-checkbox:hover{

        padding-left:54px;

    }


    .shop-category-tree--level-3
    .shop-category-checkbox{

        padding-left:66px;

    }


    .shop-category-tree--level-3
    .shop-category-checkbox:hover{

        padding-left:70px;

    }


    .shop-sidebar-price{

        padding:14px 16px 16px;

        gap:10px;

    }


    .shop-filter-subtitle{

        font-size:13px;

    }


    .shop-sidebar-price input{

        height:40px;

        font-size:12px;

    }


    .shop-filter-button{

        width:calc(100% - 32px);

        height:40px;

        margin:0 16px 16px;

        font-size:11px;

    }

}


/*==================================================
    VERY SMALL MOBILE
==================================================*/

@media (max-width:400px){

    .shop-widget__title{

        padding:13px 14px;

        font-size:13px;

    }


    .shop-category-checkbox{

        padding:8px 14px;

        font-size:11px;

    }


    .shop-category-checkbox:hover{

        padding-left:18px;

    }


    .shop-category-tree--level-1
    .shop-category-checkbox{

        padding-left:30px;

    }


    .shop-category-tree--level-1
    .shop-category-checkbox:hover{

        padding-left:34px;

    }


    .shop-category-tree--level-2
    .shop-category-checkbox{

        padding-left:46px;

    }


    .shop-category-tree--level-2
    .shop-category-checkbox:hover{

        padding-left:50px;

    }


    .shop-category-tree--level-3
    .shop-category-checkbox{

        padding-left:62px;

    }


    .shop-category-tree--level-3
    .shop-category-checkbox:hover{

        padding-left:66px;

    }


    .shop-sidebar-price{

        padding:13px 14px 14px;

    }


    .shop-filter-button{

        width:calc(100% - 28px);

        margin:0 14px 14px;

    }

}

/*==================================================
    TIPA MART
    SEARCH / SHOP CATEGORY CHECKBOXES
==================================================*/


.shop-filter-form{

    width:100%;

}


.shop-category-all{

    width:100%;

    border-bottom:1px solid #E8E8E8;

}


.shop-category-checkbox{

    position:relative;

    display:flex;

    align-items:center;

    gap:10px;

    width:100%;

    min-width:0;

    padding:11px 20px;

    cursor:pointer;

    color:#555555;

    font-size:13px;

    font-weight:500;

    line-height:1.4;

    transition:

        background .2s ease,

        color .2s ease;

}


.shop-category-checkbox:hover{

    background:#F8FAFD;

    color:#082C6C;

}


.shop-category-checkbox input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}


.shop-category-checkmark{

    flex:0 0 auto;

    width:17px;

    height:17px;

    border:1px solid #CCCCCC;

    border-radius:3px;

    background:#ffffff;

    position:relative;

    transition:

        background .2s ease,

        border-color .2s ease;

}


.shop-category-checkbox input:checked
~ .shop-category-checkmark{

    background:#082C6C;

    border-color:#082C6C;

}


.shop-category-checkbox input:checked
~ .shop-category-checkmark::after{

    content:"";

    position:absolute;

    left:5px;

    top:2px;

    width:4px;

    height:8px;

    border:solid #ffffff;

    border-width:0 2px 2px 0;

    transform:rotate(45deg);

}


.shop-category-name{

    flex:1 1 auto;

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.shop-category-count{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:25px;

    height:25px;

    padding:0 7px;

    border-radius:50%;

    background:#F3F3F3;

    color:#777777;

    font-size:11px;

    font-weight:600;

}


.shop-category-checkbox
input:checked
~ .shop-category-name{

    color:#082C6C;

    font-weight:600;

}


.shop-category-checkbox
input:checked
~ .shop-category-count{

    background:#F5B51D;

    color:#082C6C;

}


/*==================================================
    CATEGORY TREE
==================================================*/

.shop-category-tree{

    list-style:none;

    margin:0;

    padding:0;

}


.shop-category-item{

    margin:0;

    padding:0;

}


.shop-category-children{

    margin:0;

    padding:0;

}


.shop-category-tree--level-1
.shop-category-checkbox{

    padding-left:40px;

}


.shop-category-tree--level-2
.shop-category-checkbox{

    padding-left:60px;

}


.shop-category-tree--level-3
.shop-category-checkbox{

    padding-left:80px;

}


/*==================================================
    PRICE FILTER
==================================================*/

.shop-sidebar-price{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:18px 20px 20px;

    border-top:1px solid #E8E8E8;

}


.shop-filter-subtitle{

    margin:0 0 2px;

    color:#222222;

    font-size:14px;

    font-weight:700;

}


.shop-sidebar-price input{

    display:block;

    width:100%;

    height:42px;

    padding:0 12px;

    border:1px solid #DDDDDD;

    border-radius:4px;

    background:#ffffff;

    color:#222222;

    font-family:inherit;

    font-size:13px;

    outline:none;

    transition:border-color .2s ease;

}


.shop-sidebar-price input:focus{

    border-color:#082C6C;

}


.shop-filter-button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:calc(100% - 40px);

    height:42px;

    margin:0 20px 20px;

    padding:0 15px;

    border:none;

    border-radius:4px;

    background:#082C6C;

    color:#ffffff;

    font-family:inherit;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

    transition:

        background .2s ease,

        color .2s ease;

}


.shop-filter-button:hover{

    background:#F5B51D;

    color:#082C6C;

}


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

@media (max-width:768px){

    .shop-category-checkbox{

        padding:10px 18px;

    }


    .shop-category-tree--level-1
    .shop-category-checkbox{

        padding-left:34px;

    }


    .shop-category-tree--level-2
    .shop-category-checkbox{

        padding-left:50px;

    }


    .shop-category-tree--level-3
    .shop-category-checkbox{

        padding-left:66px;

    }


    .shop-sidebar-price{

        padding:16px 18px 18px;

    }


    .shop-filter-button{

        width:calc(100% - 36px);

        margin:0 18px 18px;

    }

}


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

@media (max-width:576px){

    .shop-category-checkbox{

        padding:9px 16px;

        font-size:12px;

    }


    .shop-category-tree--level-1
    .shop-category-checkbox{

        padding-left:30px;

    }


    .shop-category-tree--level-2
    .shop-category-checkbox{

        padding-left:44px;

    }


    .shop-category-tree--level-3
    .shop-category-checkbox{

        padding-left:58px;

    }


    .shop-category-count{

        min-width:23px;

        height:23px;

        font-size:10px;

    }


    .shop-sidebar-price{

        padding:14px 16px 16px;

        gap:10px;

    }


    .shop-filter-button{

        width:calc(100% - 32px);

        margin:0 16px 16px;

    }

}