html,
body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

@media (max-width: 800px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .modal,
    .drawer {
        overscroll-behavior: contain;
    }

    .site-header,
    .hero,
    .catalog-section,
    .story,
    footer {
        max-width: 100vw;
    }

    .dashboard {
        display: block !important;
        width: 100%;
        min-width: 0;
    }

    .dashboard aside {
        position: relative !important;
        inset: auto !important;
        width: 100%;
        height: auto !important;
        min-height: 0;
        padding: 12px 14px;
        display: block;
        overflow: hidden;
    }

    .dashboard .side-brand {
        justify-content: center;
    }

    .dashboard aside nav {
        display: flex !important;
        width: 100%;
        margin: 12px 0 0;
        padding: 0 0 4px;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard aside nav::-webkit-scrollbar {
        display: none;
    }

    .dashboard aside nav button,
    .dashboard aside nav a {
        display: inline-flex !important;
        align-items: center;
        flex: 0 0 auto;
        width: auto;
        min-width: max-content;
        white-space: nowrap;
        padding: 10px 13px;
    }

    .dashboard aside > button {
        display: none !important;
    }

    .dashboard main {
        width: 100%;
        min-width: 0;
        padding: 22px 14px !important;
        overflow: hidden;
    }

    .dashboard main header {
        width: 100%;
        min-width: 0;
    }

    .dashboard .admin-chip {
        display: none;
    }

    .dashboard .stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100%;
        gap: 10px;
    }

    .dashboard .stat {
        min-width: 0;
        padding: 16px;
    }

    .dashboard .panel {
        width: 100%;
        min-width: 0;
        padding: 16px;
    }

    .dashboard .panel-head {
        display: block;
    }

    .dashboard .panel-head input {
        width: 100%;
        max-width: none;
    }

    .dashboard .orders,
    .dashboard #adminProducts {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .dashboard .product-row {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr) auto;
        grid-template-areas:
            "photo name edit"
            "photo category edit"
            "photo price edit";
        align-items: center;
        gap: 5px 12px;
        width: 100%;
        min-width: 0;
        padding: 16px 0;
    }

    .dashboard .product-thumb {
        grid-area: photo;
        width: 72px;
        height: 72px;
    }

    .dashboard .product-name {
        grid-area: name;
        min-width: 0;
    }

    .dashboard .product-name b,
    .dashboard .product-name small {
        display: block;
        overflow-wrap: anywhere;
    }

    .dashboard .product-category {
        grid-area: category;
        min-width: 0;
    }

    .dashboard .product-price {
        grid-area: price;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 3px 7px;
        min-width: 0;
    }

    .dashboard .product-price small {
        white-space: nowrap;
        color: var(--muted);
    }

    .dashboard .product-edit {
        grid-area: edit;
        width: auto;
        min-width: 76px;
        padding: 9px 12px;
    }

    .catalog-managers,
    .editor-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 420px) {
    .dashboard .stats {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .dashboard header h1 {
        font-size: 34px;
    }

    .dashboard .panel {
        padding: 14px;
    }

    .dashboard .product-row {
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-areas:
            "photo name"
            "photo category"
            "photo price"
            "edit edit";
    }

    .dashboard .product-thumb {
        width: 64px;
        height: 64px;
    }

    .dashboard .product-edit {
        width: 100%;
        margin-top: 8px;
    }

    .dashboard aside nav a[href*="index.php"] {
        position: fixed;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        z-index: 20;
        display: inline-flex !important;
        min-width: 0;
        padding: 12px 16px;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 24px;
        color: #fff;
        background: var(--g);
        box-shadow: 0 8px 24px rgba(7, 29, 24, 0.28);
    }
}