/**
 * Aeris public storefront mobile pass (Step 8).
 * Loads after layout.css + mobile-enhancements on all division sites.
 * Breakpoint aligns with panel chrome (992px).
 */

@media (max-width: 992px) {
    body {
        overflow-x: clip;
        max-width: 100%;
    }

    /* Header layout: aeris_storefront_header_mobile.css + .js (loaded end of #mainHeader) */

    /* Override page-specific inline 3-column grids (index.php, vendor_shop.php, etc.) */
    .main-layout-wrapper {
        display: block !important;
        grid-template-columns: none !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 8px 6px 16px !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }

    .main-layout-wrapper > [style*="grid-column"] {
        grid-column: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .sidebar-left,
    .sidebar-right {
        display: none !important;
    }

    .content-area {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-column: auto !important;
        overflow-x: hidden !important;
        border-radius: 6px !important;
    }

    .global-pagination-strip {
        max-width: 100% !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
    }

    /* Home commerce dashboard (Gtrado index) */
    .unified-dashboard {
        padding: 10px !important;
        margin-bottom: 12px !important;
        border-radius: 10px !important;
    }

    .unified-dashboard .dash-main {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .unified-dashboard .dash-price-group {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .unified-dashboard .tfd-mini-grid {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        max-width: 100%;
        padding-bottom: 4px;
    }

    .banner-carousel {
        height: 200px !important;
        margin-bottom: 12px !important;
        border-radius: 6px !important;
    }

    /* Shared card grids */
    .card-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    /* Cart */
    .cart-shell {
        padding: 16px 0 48px !important;
    }

    .cart-container {
        padding: 0 8px !important;
    }

    .cart-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .cart-item {
        grid-template-columns: 72px 1fr !important;
    }

    .cart-item img {
        width: 72px !important;
        height: 72px !important;
    }

    .cart-item-actions {
        grid-column: 1 / -1;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Vendor shop */
    .vendor-items-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .vendor-3d-container .main-layout-wrapper {
        padding: 8px 4px !important;
    }

    .vendor-header-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .vendor-stats {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* Wide tables scroll inside content */
    .content-area table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Common product listing grids */
    .products-grid,
    .sales-products-grid,
    .listing-grid,
    .shop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

@media (max-width: 480px) {
    .main-layout-wrapper {
        padding: 6px 4px 12px !important;
    }

    .card-grid-4,
    .vendor-items-grid,
    .products-grid,
    .sales-products-grid,
    .listing-grid,
    .shop-grid {
        grid-template-columns: 1fr !important;
    }

    .banner-carousel {
        height: 160px !important;
    }

    .unified-dashboard .price-val {
        font-size: 1rem !important;
    }

    .cart-item {
        grid-template-columns: 1fr !important;
    }

    .cart-item img {
        width: 100% !important;
        height: 140px !important;
    }

}