/*
 * Tray Responsive Changes
 * -----------------------
 * Hide the tray completely if #cuar-js-content-container is <600 px
 * JS will take care about moving the sidebar out of the tray.
 */
@element 'body.tray-rescale #cuar-js-content-container' and (max-width: 551px){
    body.customer-area-active.tray-rescale #cuar-js-content-container .tray-left,
    body.customer-area-active.tray-rescale #cuar-js-content-container .tray-right,
    body.customer-area-active.tray-rescale #cuar-js-content-container .scroller-bar{
        display: none!important;
    }
    body.customer-area-active.tray-rescale #cuar-js-content-container .tray-center{
        padding-right: 13px !important;
        height: auto!important;
    }
    body.customer-area-active.tray-rescale #cuar-js-content-container .tray-scroller,
    body.customer-area-active.tray-rescale #cuar-js-content-container .scroller-content{
        overflow: auto;
        overflow-x: auto;
        overflow-y: auto;
        height: auto!important;
    }
}

/*
 * Collection Responsive Changes
 * -----------------------------
 * Adapt collection thumb sizes depending on wrapper width
 */

/* Grid view */
@element 'body.customer-area-active #cuar-js-collection-gallery' and (max-width: 1350px){
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .mix,
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .gap {
        width: 23.5%;
    }
}
@element 'body.customer-area-active #cuar-js-collection-gallery' and (max-width: 1050px){
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .mix,
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .gap {
        width: 32%;
    }
}
@element 'body.customer-area-active #cuar-js-collection-gallery' and (max-width: 650px){
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .mix,
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .gap {
        width: 49%;
    }
}
@element 'body.customer-area-active #cuar-js-collection-gallery' and (max-width: 450px){
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .mix,
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .gap {
        width: 100%;
    }
}

/* List view */
@element 'body.customer-area-active #cuar-js-collection-gallery' and (max-width: 1350px){
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .mix,
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .gap {
        width: 49%;
    }
}
@element 'body.customer-area-active #cuar-js-collection-gallery' and (max-width: 1050px){
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .mix,
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .gap {
        width: 100%;
    }
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .collection-item .collection-list-blocks .collection-list-left {
        width: 40%;
    }
}
@element 'body.customer-area-active #cuar-js-collection-gallery' and (max-width: 450px){
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .mix,
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .gap {
        width: 100%;
    }
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .collection-item .collection-list-blocks .collection-list-left,
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .collection-item .collection-list-blocks .collection-list-right,
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .collection-item .collection-list-blocks{
        width: 100%;
        display: block;
        border-left: 0;
    }
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .collection-item .collection-list-blocks .collection-list-left > div,
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .collection-item .collection-list-blocks .collection-list-right > div {
        padding: 5px!important;
    }
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .collection-item .collection-list-blocks .collection-footer-meta-owner {
        padding: 0px!important;
    }
}