//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .page-products {
        // if the styles for .page-title occur on other pages, we should consider removing the parent .page-products from the styles
        .page-title {
            margin-top: 2rem;
        }
        .columns {
            padding-top: 0;
        }
        &.page-layout-1column {
            .filter.block {
                display: none;
            }
        }
    }
    .category-description {
        h2 {
            margin-bottom: 10px;
            margin-top: 0;
        }
        h3 {
            margin-bottom: 10px;
            margin-top: 0;
        }
        p {
            color: @djo-gray;
        }
        :last-child {
            margin-bottom: 0;
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .page-products {
        // if the styles for .page-title occur on other pages, we should consider removing the parent .page-products from the styles
        .page-title {
            .lib-font-size(36);
            text-align: center;
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .page-products {
        // if the styles for .page-title occur on other pages, we should consider removing the parent .page-products from the styles
        .page-title {
            .lib-font-size(48);
            text-align: left;
        }
    }
    .category-description h2 {
        .lib-font-size(30);
        margin-bottom: 10px;
        margin-top: 0;
    }
    .category-description h3 {
        .lib-font-size(28);
        margin-bottom: 10px;
        margin-top: 0;
    }
    .category-description p {
        .lib-font-size(24);
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .page-products {
        &.page-layout-2columns-left {
            .column.main {
                float: right;
                width: 73.5%;
            }
            .sidebar {
                display: block;
                padding-right: 0;
                width: 26.5%;
            }
        }
        .sidebar-main .block .title {
            background-color: #d7d7d7;
            border-bottom: 1px solid #b4b4b4;
            border-top: 1px solid #b4b4b4;
            padding-bottom: 24px;
            padding-left: 35px;
            padding-top: 24px;
            strong {
                .lib-font-size(16);
                font-weight: 400;
                line-height: 1;
                margin-top: 0;
                margin-bottom: 0;
            }
        }
        .category-description-secondary {
            border-left: 1px solid #dbdfe1;
            padding-left: 31px;
        }
        // remove the border on 1-column layout
        &.page-layout-1column {
            .category-description-secondary {
                border-left: none;
            }
        }
    }
}