/* GrapesJS Editor Compatibility Styles */
.gjs-cell {
    min-height: 30px;
    box-sizing: border-box;
}
.gjs-row {
    min-height: 30px;
    box-sizing: border-box;
}
/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}
/* Basic responsive behavior */
@media (max-width: 768px) {
    .gjs-cell {
        width: 100% !important;
        display: block !important;
    }

    .gjs-row {
        display: block !important;
    }
}
/* Flexbox fallback for older browsers */
.gjs-row {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.gjs-cell {
    display: table-cell;
    vertical-align: top;
}
/* Default styles */
.wares-section {
    display: flex;
    flex-direction: column;
}
.wares-row {
    display: flex;
    flex-wrap: wrap;
}
/* Columns */
.wares-column {
    flex: 1 1 auto;
    box-sizing: border-box;
}
.wares-column.col-1-1 { flex: 0 0 100%; max-width: 100%; }
.wares-column.col-1-2 { flex: 0 0 50%; max-width: 50%; }
.wares-column.col-1-3 { flex: 0 0 33.33%; max-width: 33.33%; }
.wares-column.col-2-3 { flex: 0 0 66.66%; max-width: 66.66%; }
.wares-column.col-1-4 { flex: 0 0 25%; max-width: 25%; }
.wares-column.col-2-4 { flex: 0 0 50%; max-width: 50%; }
.wares-column.col-3-4 { flex: 0 0 75%; max-width: 75%; }
.wares-column.col-1-5 { flex: 0 0 20%; max-width: 20%; }
.wares-column.col-2-5 { flex: 0 0 40%; max-width: 40%; }
.wares-column.col-3-5 { flex: 0 0 60%; max-width: 60%; }
.wares-column.col-4-5 { flex: 0 0 80%; max-width: 80%; }
.wares-column.col-1-6 { flex: 0 0 16.66%; max-width: 16.66%; }
.wares-column.col-2-6 { flex: 0 0 33.33%; max-width: 33.33%; }
.wares-column.col-3-6 { flex: 0 0 50%; max-width: 50%; }
.wares-column.col-4-6 { flex: 0 0 66.66%; max-width: 66.66%; }
.wares-column.col-5-6 { flex: 0 0 83.33%; max-width: 83.33%; }
/* Tablet */
@media (max-width: 992px) {
    .wares-column.md-col-1-1 { flex: 0 0 100%; max-width: 100%; }
    .wares-column.md-col-1-2 { flex: 0 0 50%; max-width: 50%; }
    .wares-column.md-col-1-3 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .wares-column.md-col-2-3 { flex: 0 0 66.6666%; max-width: 66.6666%; }
    .wares-column.md-col-1-4 { flex: 0 0 25%; max-width: 25%; }
    .wares-column.md-col-2-4 { flex: 0 0 50%; max-width: 50%; }
    .wares-column.md-col-3-4 { flex: 0 0 75%; max-width: 75%; }
    .wares-column.md-col-1-5 { flex: 0 0 20%; max-width: 20%; }
    .wares-column.md-col-2-5 { flex: 0 0 40%; max-width: 40%; }
    .wares-column.md-col-3-5 { flex: 0 0 60%; max-width: 60%; }
    .wares-column.md-col-4-5 { flex: 0 0 80%; max-width: 80%; }
    .wares-column.md-col-1-6 { flex: 0 0 16.6666%; max-width: 16.6666%; }
    .wares-column.md-col-2-6 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .wares-column.md-col-3-6 { flex: 0 0 50%; max-width: 50%; }
    .wares-column.md-col-4-6 { flex: 0 0 66.6666%; max-width: 66.6666%; }
    .wares-column.md-col-5-6 { flex: 0 0 83.3333%; max-width: 83.3333%; }
}
/* Mobile */
@media (max-width: 480px) {
    .wares-column.xs-col-1-1 { flex: 0 0 100%; max-width: 100%; }
    .wares-column.xs-col-1-2 { flex: 0 0 50%; max-width: 50%; }
    .wares-column.xs-col-1-3 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .wares-column.xs-col-2-3 { flex: 0 0 66.6666%; max-width: 66.6666%; }
    .wares-column.xs-col-1-4 { flex: 0 0 25%; max-width: 25%; }
    .wares-column.xs-col-2-4 { flex: 0 0 50%; max-width: 50%; }
    .wares-column.xs-col-3-4 { flex: 0 0 75%; max-width: 75%; }
    .wares-column.xs-col-1-5 { flex: 0 0 20%; max-width: 20%; }
    .wares-column.xs-col-2-5 { flex: 0 0 40%; max-width: 40%; }
    .wares-column.xs-col-3-5 { flex: 0 0 60%; max-width: 60%; }
    .wares-column.xs-col-4-5 { flex: 0 0 80%; max-width: 80%; }
    .wares-column.xs-col-1-6 { flex: 0 0 16.6666%; max-width: 16.6666%; }
    .wares-column.xs-col-2-6 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .wares-column.xs-col-3-6 { flex: 0 0 50%; max-width: 50%; }
    .wares-column.xs-col-4-6 { flex: 0 0 66.6666%; max-width: 66.6666%; }
    .wares-column.xs-col-5-6 { flex: 0 0 83.3333%; max-width: 83.3333%; }
}