/**
 * market-04-responsive.css
 * Breakpoint: >=1024px desktop, 641-1023px tablet, <=640px mobile.
 */

/* =========================================================================
 * CUSTOMER
 * =======================================================================*/

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
    .mp-product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--mp-space-3);
    }
    .mp-admin { flex-direction: column; }
    .mp-admin-main { width: 100%; }
}
/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    .mp-store-header__inner,
    .mp-catalog-toolbar,
    .mp-catalog-main,
    .mp-store-map-wrap {
        padding-left: var(--mp-space-3);
        padding-right: var(--mp-space-3);
    }
    .mp-store-name { font-size: 16px; }
    .mp-store-map-wrap iframe {
        height: 220px;
        max-height: 32vh;
        border-radius: var(--mp-radius-md);
    }
    .mp-store-desc { display: none; }
    .mp-store-logo { width: 40px; height: 40px; }
    #mp-btn-track-order { display: none; }
    .mp-btn--ghost span { display: none; }
    .mp-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--mp-space-3);
    }
    .mp-product-card__nama { font-size: 13px; }
    .mp-product-card__harga { font-size: 14px; }
    .mp-modal { align-items: flex-end; }
    .mp-modal__panel {
        max-width: 100%;
        max-height: 94vh;
        padding: var(--mp-space-4);
        border-radius: var(--mp-radius-lg) var(--mp-radius-lg) 0 0;
    }
    .mp-detail-body { padding: var(--mp-space-4); }
    .mp-detail-nama { font-size: 17px; }
    .mp-detail-harga { font-size: 19px; }
    .mp-cart-row {
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto auto;
    }
    .mp-cart-row__qty,
    .mp-cart-row__remove {
        grid-column: 2;
        justify-self: start;
    }
    .mp-cart-row__remove { grid-row: 2; margin-left: var(--mp-space-3); }
    .mp-radio-group { flex-direction: column; }
    .mp-radio-pill { justify-content: center; }
}
/* ---------- Extra small ---------- */
@media (max-width: 380px) {
    .mp-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--mp-space-2); }
    .mp-header-actions { gap: 4px; }
}

/* =========================================================================
 * ADMIN
 * Sidebar jadi off-canvas drawer di <=1023px, topbar mobile muncul,
 * grid dashboard/form/galeri/varian reflow bertahap.
 * =======================================================================*/

/* ---------- Tablet & di bawahnya: sidebar jadi drawer ---------- */
@media (max-width: 1023px) {
    .mp-admin-nav-toggle { display: block; }

    .mp-admin-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
    }
    .mp-admin-sidebar.is-open { transform: translateX(0); }

    /* Title udah tampil di topbar (☰ + nama halaman) — sembunyiin
       <h1> di dalam page biar gak double kayak "☰ Dashboard" lalu
       "Dashboard" lagi di bawahnya. */
    .mp-admin-page__header h1 { display: none; }

    .mp-admin-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        box-shadow: var(--mp-shadow-lg);
        transition: transform .2s ease;
    }
    .mp-admin-sidebar.is-open { transform: translateX(0); }

    /* overlay gelap saat drawer terbuka — elemen opsional dipasang lewat JS */
    .mp-admin-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 39;
        background: rgba(20, 20, 30, .4);
        display: none;
    }
    .mp-admin-sidebar-overlay.is-open { display: block; }

    .mp-admin-page { padding: var(--mp-space-5) var(--mp-space-4) 48px; }

    .mp-dashboard-grid { grid-template-columns: 1fr; }
    .mp-field-row { grid-template-columns: 1fr; }
    .mp-order-detail-grid { grid-template-columns: 1fr; }

    .mp-galeri-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    .mp-admin-page { padding: var(--mp-space-4) var(--mp-space-3) 40px; }

    .mp-admin-page__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .mp-stat-grid { gap: 10px; }
    .mp-stat-card { padding: 14px 16px; }
    .mp-stat-card__value { font-size: 22px; }

    .mp-card { padding: var(--mp-space-4); }
    .mp-card--table {
        padding: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mp-card--table .mp-table {
        min-width: 640px;
    }

    .mp-toolbar-row { gap: 8px; }
    .mp-input--search,
    .mp-select--filter,
    .mp-input--date { max-width: 100%; width: 100%; }

    .mp-modal__panel--form,
    .mp-modal__panel--wide,
    .mp-modal__panel--confirm {
        max-width: 100%;
    }

    .mp-tabs { overflow-x: auto; white-space: nowrap; }
    .mp-tab { margin-right: 14px; }

    .mp-galeri-grid { grid-template-columns: repeat(2, 1fr); }

    .mp-kv-rows .mp-kv-row { grid-template-columns: 1fr; }
    .mp-varian-rows .mp-varian-row { grid-template-columns: 1fr 1fr; }

    .mp-od-items .mp-od-item-row { grid-template-columns: 1fr; gap: 4px; }
    #mp-od-kurir-fields.mp-field-row { grid-template-columns: 1fr; }

    .mp-qr-card { padding: 24px 16px; }
    .mp-qr-image { width: 160px; height: 160px; }
}

/* ---------- Extra small ---------- */
@media (max-width: 380px) {
    .mp-stat-grid { grid-template-columns: 1fr; }
    .mp-varian-rows .mp-varian-row { grid-template-columns: 1fr; }
    .mp-galeri-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}