﻿.section-product .listing-item {
    background: #eaeaea;
    padding: 10px;
    margin-bottom: 20px;
}

    .section-product .listing-item .body {
        text-align: center;
        height: 150px;
        padding: 15px;
    }

        .section-product .listing-item .body h3 {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            margin-top: 0;
            font-size: 20px;
            line-height: 1.4;
        }

        .section-product .listing-item .body p {
            font-size: 14px;
            color: #888;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

/*分類feature panel*/
.section-product .feature-panel {
    width: 240px;
}

.section-product .product-class.feature-panel.open {
    border-right: unset;
}

.section-product .feature-panel .header {
    justify-content: space-between;
    align-items: center;
    background-color: #2C3D4F;
    padding: 0 15px;
}

.section-product .product-class.feature-panel.open .header {
    background-color: #2C3D4F;
    color: #fff;
}

    .section-product .product-class.feature-panel.open .header h2 {
        width: 100%;
        color: #fff;
        text-align: left;
        font-size: 1.2rem;
        line-height: 40px;
    }

.section-product .feature-panel .header a.exit {
    position: relative;
    width: 20px;
    height: 20px;
}

.section-product .feature-panel .wrapper {
    position: unset;
    width: 100%;
    overflow-y: auto;
    height: 100%;
}

.section-product .feature-panel ul {
    padding-left: 0;
    list-style: none;
}


    .section-product .feature-panel ul > li > a {
        display: flex;
        justify-content: space-between;
        padding: 15px 20px;
        color: #000;
        border-bottom: 1px solid #aeb0b3;
    }

    .section-product .feature-panel ul > li > ul > li > a {
        font-size: 15px;
    }

.section-product .product-class.feature-panel.open .bg {
    background-color: unset;
    width: 250px;
}

.section-product .product-class .exit:before, .section-product .product-class .exit:after {
    position: absolute;
    top: 0;
    left: 9px;
    content: '';
    width: 2px;
    height: 20px;
    background-color: #fff;
}

.section-product .product-class .exit:before {
    transform: rotate(45deg);
}

.section-product .product-class .exit:after {
    transform: rotate(-45deg);
}

.section-product .content h4 {
    color: #2c3d4f;
}

.section-product:not(.category) .content {
    display: flex;
    justify-content: center;
}

    .section-product:not(.category) .content ul {
        list-style-type: none;
    }

    .section-product:not(.category) .content li:before {
        content: "- ";
    }

.section-product .sorter .dropdown-menu .dropdown-item.active {
    background-color: transparent;
    color: #ff8158;
}


.section-product .sorter .dropdown-menu .dropdown-item:hover {
    color: #ff8158;
}

@media (min-width: 992px) {
    .section-product .feature-panel.left {
        left: 0;
    }

    .section-product .product-class.feature-panel .header {
        background-color: transparent !important;
        height: auto;
        padding: 15px 0;
        justify-content: space-between;
        align-items: center;
    }

    .section-product .product-class.feature-panel.left.open {
        box-shadow: unset;
    }

    .section-product .product-class.feature-panel.open .header h2 {
        color: #1c2e5a;
    }

    .section-product .product-class.feature-panel {
        position: relative;
        z-index: 1;
        box-shadow: 10px 4px 4px rgba(0, 0, 0, 0.06);
        height: 100%;
    }

        .section-product .product-class.feature-panel .header {
            display: none;
        }


    .section-product .feature-panel .wrapper {
        background: rgb(240,241,243);
        background: linear-gradient(90deg, rgba(240,241,243,1) 16%, rgba(209,215,221,1) 54%, rgba(182,181,200,1) 100%);
    }

    .section-product .feature-panel .body {
        background-color: transparent;
    }
}
