/* -- showcase -- */

/*
//    .list_products.fastener
//        .list_products.align
//            .buttons
//                .sorting
//                    a.field
//                    a.field.asc
//                    a.field.desc
//                .pagesize
//                    .chooser
//                        input[type="checkbox"].checkbox#pagesize-dropdown-{$category.alias.alias}
//                        label[for="pagesize-dropdown-{$category.alias.alias}"]
//                        ul
//                            li
//                                a
//                                a.selected
*/

/* -- FIXES -- */

.list_products .buttons .popup {
    list-style-type: none;
}

.pagesize .chooser .popup {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.list_products a.subdirectory,
.list_products .buttons a {
    text-decoration: none;
}

/* -- LAYOUT -- */

.list_products .subdirectories {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
}

.list_products .subdirectory {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.list_products .buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.list_products .sorting {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-grow: 0;
}

.list_products .pagesize {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.list_products .chooser {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.list_products .pagesize .chooser .popup {
    align-self: center;
}

/* == DROPDOWN == */

/* -- LAYOUT -- */

.pagesize .chooser .popup {
    position: absolute;
}

.pagesize .chooser .checkbox {
    display: none;
}

.pagesize .chooser .checkbox ~ .popup {
    display: none;
}

.pagesize .chooser .checkbox:checked ~ .popup {
    display: flex;
    flex-direction: column;
}

/* -- STYLING -- */

.pagesize .chooser label {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.pagesize .chooser .checkbox ~ label {
    background-image: url('../img/arrow-dropdown.png');
}

.pagesize .chooser .checkbox:checked ~ label {
    background-image: url('../img/arrow-dropdown-up.png');
}

.list_products .subdirectory {
    border: 1px solid #dedede;
}

.list_products a.subdirectory,
.list_products a.subdirectory:visited {
    background-color: white;
    color: #212121;
    font-size: 20px;
}

.list_products a.subdirectory:hover {
    background-color: #ee1d25;
}

.list_products .subdirectory .subdirectory-image {
    width: 270px;
    height: 180px;
    border-bottom: 1px solid #e0e0e0;
}

.list_products .subdirectory .subdirectory-title {
    font-family: 'Roboto Bold';
    text-overflow: ellipsis;
    /*white-space: nowrap;*/
}

.list_products .buttons {
    background-color: #eeeeee;
}

.list_products .buttons a,
.list_products .buttons {
    color: #757575;
    font-size: 14px;
}

.list_products .buttons .sorting .label {
    white-space: nowrap;
}

.list_products .buttons .sorting .field.asc,
.list_products .buttons .sorting .field.desc {
    font-family: 'Roboto Bold';
    color: #212121;
}

.list_products .buttons .sorting .field.asc {
    background: url('../img/arrange_up.png') no-repeat right center;
}

.list_products .buttons .sorting .field.desc {
    background: url('../img/arrange_down.png') no-repeat right center;
}

.list_products .pagesize {
    white-space: nowrap;
}

.list_products .pagesize .chooser {
    font-family: 'Roboto Bold';
    font-size: 15px;
    color: #212121;
    background-color: white;
    border: 1px solid #dedede;
}

.list_products .pagesize .chooser .popup {
    background-color: white;
    border: 1px solid #dedede;
}

.list_products .pagesize .chooser .popup a {
    font-size: 15px;
    color: #212121;
}

.list_products .pagesize .chooser .popup a {
    font-family: 'Roboto Regular';
}

.list_products .pagesize .chooser .popup a.selected {
    font-family: 'Roboto Bold';
}

/* -- SPACING -- */

.list_products .subdirectories {
    margin-left: 15px;
    margin-right: 15px;
}

.list_products .subdirectory {
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 30px;
}

.list_products .subdirectory .subdirectory-title {
    max-width: 216px;
    /*min-height: 102px;*/
    margin-left: 27px;
    margin-right: 27px;
    margin-top: 25px;
    margin-bottom: 24px;
}

.list_products .buttons {
    min-height: 60px;
    padding-left: 25px;
    padding-right: 25px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 30px;
}

.list_products .buttons .sorting .field {
    padding-right: 20px;
}

.list_products .buttons .sorting .label {
    margin-right: 5px;
}

.list_products .buttons .sorting .field.asc,
.list_products .buttons .sorting .field.desc {
    margin-left: 15px;
    margin-right: 15px;
}

.list_products .pagesize .chooser {
    margin-left: 2px;
    min-width: 50px;
    min-height: 30px;
}

.list_products .pagesize .chooser .popup {
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-right: 18px;
}

/* == MOBILE == */

@media screen and (max-width: 963px) {
    /* -- LAYOUT -- */
    .list_products .buttons .sorting .label,
    .list_products .buttons .pagesize .label {
        display: none;
    }
    .list_products .buttons .sorting {
        flex-direction: column;
        align-items: flex-start;
    }
    /* -- SPACING -- */
    .list_products .buttons {
        margin-left: 0;
        margin-right: 0;
    }
    .list_products .buttons .sorting .field.asc,
    .list_products .buttons .sorting .field.desc {
        margin-left: 0;
        margin-right: 0;
    }
}

/* == MOBILE == */

@media screen and (max-width: 920px) {
    /* -- STYLING -- */
    .list_products .subdirectories {
        justify-content: center;
    }
    /* -- SPACING -- */
    .list_products .subdirectories {
        margin-left: 0px; /* [!] linked with data-mediafix-width attr at list_products.tpl */
        margin-right: 0px;
    }
    .list_products .buttons {
        margin-bottom: 15px;
    }
}