/* ── Tablet ≤ 1024px ── */
@media (max-width: 1024px) {
    .nav-search { max-width: 260px; margin: 0 0.75rem; }
    .featured-grid { grid-template-columns: repeat(3, 1fr); }
    .detail-wrap { grid-template-columns: 220px 1fr; }
}

/* ── Mobile ≤ 820px increased from 768 to avoid firefox specific bugs ── */
@media (max-width: 820px) {

    /* Nav: slim bar - brand left, hamburger right */
    .nav {
        padding: 0 1rem;
        justify-content: space-between;
    }

    /* Hide desktop nav elements */
    .nav-search { display: none; }
    .nav-links  { display: none; }

    /* Show hamburger */
    .nav-toggle { display: flex; }

    /* Layout */
    main { padding: 1.25rem 0; }
    .page-header h1 { font-size: 1.4rem; }

    /* Card grid */
    .card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }

    /* Sort row */
    .sort-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .sort-row-right { align-self: flex-end; }

    /* Card detail */
    .detail-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
    .detail-left { max-width: 260px; margin: 0 auto; }
    .detail-name { font-size: 1.4rem; }
    .market-grid { grid-template-columns: repeat(2, 1fr); }

    /* Listings table scroll */
    .listings-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .listings-table { min-width: 480px; }

    /* Cart & Checkout */
    .cart-wrap, .checkout-wrap { grid-template-columns: 1fr; }
    .cart-row { grid-template-columns: 52px 1fr auto; gap: 0.75rem; padding: 0.75rem; }

    /* Homepage */
    .home-layout { grid-template-columns: 1fr; }
    .home-sidebar { position: static; }

    /* Hero */
    .hero { padding: 2.5rem 1.25rem; border-radius: var(--radius-md); }
    .hero-title { font-size: 1.9rem; }
    .hero-sub { font-size: 0.9rem; }

    /* Featured */
    .featured-grid { grid-template-columns: repeat(2, 1fr); }

    /* Sidebar layout */
    .main-with-sidebar { grid-template-columns: 1fr; }
    .commander-sidebar { position: static; order: -1; }
    .main-content { order: 0; }

    /* GCash */
    .gcash-box { grid-template-columns: 1fr; text-align: center; }
    .gcash-qr { margin: 0 auto; }

    /* Orders */
    .order-card-header { flex-direction: column; align-items: flex-start; }
    .order-item { gap: 0.75rem; padding: 0.75rem 1rem; }

    /* Auth */
    .auth-wrap { padding: 1.5rem 0.5rem; }
    .auth-card { padding: 1.5rem 1rem; }

    /* Commander modal: slides up from bottom */
    .commander-modal-overlay { align-items: flex-end; padding: 0; }
    .commander-modal {
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        position: fixed;
        bottom: 0; left: 0; right: 0;
    }
}

/* ── Small phones ≤ 480px ── */
@media (max-width: 480px) {
    .container { padding: 0 0.875rem; }
    .card-grid { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
    .card-body { padding: 0.625rem 0.75rem; }
    .card-options { padding: 0 0.75rem 0.4rem; }
    .hero-title { font-size: 1.6rem; }
    .featured-grid { grid-template-columns: repeat(2, 1fr); }
    .market-grid { grid-template-columns: repeat(2, 1fr); }
    .detail-name { font-size: 1.25rem; }
    .page-header h1 { font-size: 1.2rem; }
    .footer { padding: 1.25rem 1rem; }
}