@media (max-width: 768px){
    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
        -webkit-text-size-adjust:100%;
    }

    *,
    *:before,
    *:after{
        max-width:100%;
    }

    img,
    video,
    canvas{
        max-width:100%;
        height:auto;
    }

    .wrap,
    .container,
    .page,
    .box,
    .panel,
    .invoice,
    .search-box,
    .footer-card,
    .main,
    .layout{
        width:100%;
        max-width:100% !important;
    }

    .top,
    .topbar,
    .page-head,
    .product-toolbar,
    .product-table-tools,
    .filters,
    .filter-bar,
    .search-form,
    .checkout,
    .nav{
        max-width:100% !important;
    }

    .grid,
    .grid.three,
    .section-row,
    .action-grid,
    .card-grid,
    .priority-help,
    .requirements,
    .form-grid,
    .search,
    .checkout,
    .calc-grid,
    .highlight-panel,
    .color-row,
    .size-add,
    .color-add,
    .date-time-row{
        grid-template-columns:1fr !important;
    }

    .stats,
    .stats[style],
    .overview-stats,
    .overview-stats[style]{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
    }

    .stat-card{
        min-width:0;
        min-height:auto;
        padding:10px !important;
    }

    .stat-card h2,
    .summary-card h3{
        font-size:18px !important;
        line-height:1.1;
    }

    .product-grid,
    .products{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .table-wrap,
    .product-table,
    .box,
    .panel{
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch;
    }

    table{
        display:block;
        width:100%;
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        font-size:12px;
    }

    th,
    td{
        padding:7px 8px !important;
        line-height:1.22;
    }

    input,
    select,
    textarea,
    button{
        max-width:100%;
        font-size:15px;
    }

    .nav{
        flex-wrap:wrap;
        gap:8px;
    }

    .nav > div:last-child{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:6px;
    }

    .nav a{
        margin-left:0 !important;
    }

    .top,
    .topbar,
    .page-head{
        align-items:flex-start !important;
        flex-direction:column !important;
    }

    .top-actions,
    .product-buttons,
    .export-actions,
    .split-links,
    .chips{
        width:100%;
        justify-content:flex-start !important;
        gap:6px;
    }

    .btn,
    .product-btn,
    .small-link,
    .back,
    .order,
    .order-btn,
    .filter-btn,
    .reset-btn{
        min-height:36px;
        white-space:normal;
        text-align:center;
    }

    .actions{
        grid-template-columns:1fr !important;
        min-width:82px !important;
        gap:4px !important;
    }

    .actions button,
    .actions a{
        width:100%;
        min-width:0 !important;
        white-space:normal;
    }

    .item-list{
        min-width:170px !important;
    }

    .item-row{
        grid-template-columns:32px minmax(0,1fr) !important;
    }

    .selection-lines{
        min-width:92px !important;
    }

    .sidebar{
        max-height:48vh;
        overflow:auto;
        -webkit-overflow-scrolling:touch;
    }

    .brand img,
    .logo img{
        object-fit:contain;
    }
}

@media (max-width: 430px){
    body{
        font-size:13px;
    }

    .stats,
    .stats[style],
    .overview-stats,
    .overview-stats[style],
    .summary{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    th,
    td{
        padding:6px !important;
        font-size:11px;
    }

    .product-grid,
    .products{
        gap:8px !important;
    }
}