.category-sidebar{
    padding:10px;
}

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

.sidebar-title{

    font-size:28px;

    font-weight:bold;

    margin-bottom:25px;

}

/* ================= MENU ================= */

.category-menu{

    list-style:none;

    padding:0;

    margin:0;

}

.category-menu > li{

    border-bottom:1px solid #eee;

}

/* main category */

.category-link{

    position:relative;

    display:block;

    padding:14px 40px 14px 0;

    color:#333;

    font-size:18px;

    text-decoration:none;

    font-weight:bold;

}

.category-link:hover{

    text-decoration:none;

    color:#f8a81c;

}

/* arrow */

.category-link:after{

    content:"\f107";

    font-family:FontAwesome;

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);

    transition:.3s;

}

/* rotate arrow */

.category-link[aria-expanded="true"]:after{

    transform:translateY(-50%) rotate(180deg);

}

/* ================= SUBMENU ================= */

.sub-category{

    list-style:none;

    padding:0;

    margin:0;
}

.sub-category li{

    border-top:1px solid #eee;

}

.sub-category li a{

    display:block;

    padding:5px 5px 5px 20px;

    color:#555;

    text-decoration:none;

    font-size:15px;

    position:relative;

}

/* small arrow */

.sub-category li a:before{

    content:"›";

    position:absolute;

    left:8px;

    color:#999;

}

.sub-category li a:hover{
    color:#f8a81c;
}

.category-item{

    position:relative;

    border-bottom:1px solid #eee;

}

/* link */

.category-page-link {
    display: inline-block;
    padding: 10px 0;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}

.category-page-link:hover{
    color:#f8a81c;
    text-decoration:none;
}

/* button arrow */

.category-toggle {
    display: inline-block;
    padding: 8px 0;
    float: right;
    top: 0;
    border: 0;
    background: none;
    color: #333;
    font-size: 20px;
}

/* rotate */

.category-toggle i{
    transition:.3s;
}
.category-toggle i:hover, .category-toggle i:focus{
    color:#f8a81c;
}
.category-toggle[aria-expanded="true"] i{
    transform:rotate(180deg);
}
.category-toggle:not(.collapsed) i{
    transform:rotate(180deg);
}




/* ================= ROW (ลิงก์ + ปุ่มลูกศร) ================= */

.category-row:before,
.category-row:after{
    content:" ";
    display:table;
}
.category-row:after{ clear:both; }

.category-row .category-page-link{
    display:block;
    float:left;
    max-width:85%;
}

/* ================= ACTIVE / COUNT ================= */

.category-menu > li.is-active > .category-row > .category-page-link{
    color:#f8a81c;
}

.sub-category li.active > a{
    color:#f8a81c;
    font-weight:600;
    background:#fffaf0;
}

.cat-count{
    color:#999;
    font-size:13px;
    font-weight:normal;
}

/* ================= SEARCH / TAG ================= */

.sidebar-clear{
    margin:8px 0 0;
    font-size:14px;
}
.sidebar-clear a{ color:#888; }
.sidebar-clear a:hover{ color:#f8a81c; text-decoration:none; }

.sidebar-tags{ margin-top:5px; }

.brandbtn.active{
    background-color:#f8cd1c;
    font-weight:600;
}
.brandbtn .cat-count{
    color:#777;
    font-size:11px;
}

/* ================= SORT ================= */

.sort-form{
    display:inline-block;
    margin:16px 0 0;
    white-space:nowrap;
}

.sort-label{
    margin:0 8px 0 0;
    color:#555;
    font-size:15px;
    font-weight:normal;
    vertical-align:middle;
}

.sort-select{
    display:inline-block;
    width:auto;
    max-width:100%;
    height:36px;
    padding:5px 10px;
    border:1px solid #ddd;
    border-radius:6px;
    background:#fff;
    color:#333;
    font-family:inherit;
    font-size:15px;
    vertical-align:middle;
    cursor:pointer;
}
.sort-select:hover{ border-color:#ccc; }
.sort-select:focus{
    border-color:#f8cd1c;
    outline:none;
}

/* ================= MOBILE SEARCH ================= */
/* แสดงเฉพาะจอ < 992px (คุมด้วย hidden-md hidden-lg ใน products.php) */

.m-search{
    position:relative;
    margin:0 5px 8px;
}

/* font-size 16px กัน iOS ซูมหน้าเองตอนแตะช่อง */
.m-search-input{
    width:100%;
    height:42px;
    padding:0 48px 0 16px;
    border:1px solid #ddd;
    border-radius:21px;
    background:#fff;
    color:#333;
    font-family:inherit;
    font-size:16px;
    -webkit-appearance:none;
    appearance:none;
}
.m-search-input:focus{
    border-color:#f3ca20;
    outline:none;
    box-shadow:0 0 0 3px rgba(243,202,32,.25);
}

.m-search-btn{
    position:absolute;
    top:3px;
    right:3px;
    width:36px;
    height:36px;
    padding:0;
    border:0;
    border-radius:50%;
    background:linear-gradient(to right, #f9a912, #f3ca20);
    color:#000;
    font-size:15px;
    line-height:36px;
}

/* ================= EMPTY ================= */

.empty-result{
    padding:40px 15px;
    background:#fff;
    border:1px solid #eee;
    text-align:center;
}
.empty-result p{ margin-bottom:10px; }

/* ================= RESPONSIVE ================= */

@media (max-width:767px){

    /* มือถือ: กล่องเรียงตามตกมาอยู่ใต้หัวข้อ ให้ชิดซ้ายตรงแนวเดียวกับหัวข้อ
       ต้องเป็น block ด้วย ไม่งั้น .text-right ของ col ยังดันทั้งกล่องไปขวาอยู่ดี */
    .sort-form{
        display:block;
        text-align:left;
        margin:0 0 6px;
    }

    /* ตัด padding บนของคอลัมน์ทิ้ง ไม่งั้นห่างจากหัวข้อ 30px (10+10+10) */
    .sort-col{ padding-top:0; }

    .category-sidebar{

        padding:15px;

        min-height:auto;

    }

    .sidebar-title{

        font-size:24px;

    }

    .category-link{

        font-size:16px;

    }
    .collapse.in {
    display: block;
}


}