/* ReplicaMade.io layout hotfix v5
 * Final two-column correction for fluid/tablet widths.
 * Root cause fixed: fixed 231px + 710px floats could not fit once .page became fluid.
 * Use flex instead: 231px sidebar + flexible content column.
 */

.col2-left-layout .main {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    gap: 23px !important;
    overflow: visible !important;
}

/* Legacy clearfix pseudo-elements must not become flex items. */
.col2-left-layout .main:before,
.col2-left-layout .main:after {
    display: none !important;
    content: none !important;
}

.col2-left-layout .col-left.sidebar {
    display: block !important;
    float: none !important;
    clear: none !important;
    position: relative !important;
    flex: 0 0 231px !important;
    width: 231px !important;
    min-width: 231px !important;
    max-width: 231px !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    order: 1 !important;
}

.col2-left-layout .col-main {
    display: block !important;
    float: none !important;
    clear: none !important;
    position: relative !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    order: 2 !important;
}

/* Keep banners and category media inside the flexible content column. */
.col2-left-layout .col-main .promotion-banner,
.col2-left-layout .col-main .category-description {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.col2-left-layout .col-main .promotion-banner img,
.col2-left-layout .col-main .category-description img {
    max-width: 100% !important;
    height: auto !important;
}

/* Tablet / narrow desktop: same aligned two-column layout, smaller gutter. */
@media only screen and (max-width: 1040px) {
    .col2-left-layout .main {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }
    .col2-left-layout .col-left.sidebar {
        flex: 0 0 231px !important;
        width: 231px !important;
        min-width: 231px !important;
        max-width: 231px !important;
        margin: 0 !important;
    }
    .col2-left-layout .col-main {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

/* Phone layout: content first, filters afterwards.
 * This avoids forcing visitors to scroll through the entire filter sidebar
 * before seeing the category content/products.
 */
@media only screen and (max-width: 640px) {
    .col2-left-layout .main {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
    }
    .col2-left-layout .col-main {
        order: 1 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .col2-left-layout .col-left.sidebar {
        order: 2 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}