@media (max-width: 1200px) {
    /* Banner responsive styles moved to banner-engine.css */
    .product-detail { gap: 32px; }
}

@media (max-width: 1024px) {
    /* Tablet Typography Scale */
    .hero h1, .hero-title { font-size: 3rem; }
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
    body { font-size: 16px; }

    /* Layout & Sidebar Drawer */
    .cart-layout { grid-template-columns: 1fr; }
    .product-detail { grid-template-columns: 1fr; }
    .product-gallery .main-image { height: 350px; }
    .dashboard { grid-template-columns: 1fr; width: 100%; max-width: 100%; }
    .dashboard-sidebar {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1050;
        width: 280px;
        height: 100vh;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
        background: var(--sidebar-bg);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }
    .dashboard-sidebar.mobile-open {
        transform: translateX(0) !important;
    }
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        backdrop-filter: blur(2px);
    }
    .sidebar-overlay.active {
        display: block;
    }
    .sidebar-toggle {
        display: inline-flex !important;
    }
    .settings-grid { grid-template-columns: 1fr; }

    /* ── SEARCH BAR: Tablet responsive fix (769px–1024px) ────────────────
       Ensures the search bar fits cleanly without clipping or overflow.
    ── */
    .home-search-container { max-width: 100%; }
    .home-search-hero-wrap {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
    }
    .home-search-hero-input {
        min-width: 0;
        flex: 1 1 0;
    }
    .home-search-hero-btn { flex-shrink: 0; }
}


@media (min-width: 1025px) {
    .sidebar-toggle { display: none !important; }
    .sidebar-overlay { display: none !important; }
    .dashboard-sidebar {
        position: static;
        width: auto;
        height: auto;
        box-shadow: none;
        transform: none !important;
        transition: none;
    }
}

@media (max-width: 768px) {
    /* Mobile Typography Scale */
    .hero h1, .hero-title { font-size: 2.125rem; }
    h1 { font-size: 1.875rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    body { font-size: 15px; }

    .nav-toggle { display: block; }
    .nav-icon-item .nav-label-text { display: none !important; }
    .nav-user-link { padding: 4px 8px !important; }
    .nav-user-link .nav-label { font-size: 0.82rem; font-weight: 600; }
    .nav-icons .nav-btn { height: 32px; min-width: 76px; font-size: 13px; padding: 0 12px; }
    .nav-icons .nav-btn-secondary { height: 32px; min-width: 76px; font-size: 13px; padding: 0 12px; }
    .section-header h2 { font-size: 1.5rem; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
    .store-info-section { margin-top: -60px; }
    .store-info-container { flex-direction: column; align-items: center; text-align: center; }
    .store-info-logo { width: 100px; height: 100px; font-size: 2rem; }
    .store-info-details .store-meta { justify-content: center; flex-wrap: wrap; }
    .store-header { height: 200px; }
    .page-header h1 { font-size: 1.8rem; }
    .auth-box { padding: 24px; }
    .form-row { grid-template-columns: 1fr; }
    .cart-item { grid-template-columns: 80px 1fr; }
    .cart-item-actions { grid-column: span 2; flex-direction: row; justify-content: space-between; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .dash-card .dash-value { font-size: 1.4rem; }
    .dashboard-main { padding: 20px 16px; }
    .store-tabs { gap: 0; }
    .store-tab { padding: 10px 16px; font-size: 0.85rem; }
    .offer-grid { grid-template-columns: 1fr; }

    /* Table overflow protection on mobile */
    .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Container breathing room */
    .container { padding: 0 16px; }
    .settings-card { padding: 20px; }

    /* ── SEARCH BAR: Phone/Tablet responsive fix ─────────────────────────
       Prevents horizontal overflow and clipping on small viewports.
       Targets the existing .home-search-hero-* classes from index.php.
    ── */
    .section-search { overflow: hidden; }
    .home-search-container { max-width: 100%; padding: 0; }
    .home-search-hero-wrap {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 4px 6px 4px 10px;
        border-radius: 40px;
        flex-wrap: nowrap;
        min-width: 0;
        overflow: hidden;
    }
    .home-search-hero-input {
        flex: 1 1 0;
        min-width: 0;
        width: 0; /* forces flex to control width */
        padding: 10px 6px;
        font-size: 0.85rem;
    }
    .home-search-hero-btn {
        flex-shrink: 0;
        padding: 10px 14px;
        font-size: 0.85rem;
        gap: 4px;
        white-space: nowrap;
    }
    .home-search-hero-icon { display: none; } /* hide store icon on mobile to save space */
}

/* ── SEARCH BAR: Extra narrow phones (≤360px) ─────────────────────────────
   At 320px–360px the button text 'Search' + padding can still cause
   horizontal overflow if default sizes are not reduced further.
── */
@media (max-width: 360px) {
    .section-search { overflow: hidden; padding-left: 0; padding-right: 0; }
    .home-search-container { padding: 0; }
    .home-search-hero-wrap {
        padding: 3px 4px 3px 8px;
        gap: 0;
    }
    .home-search-hero-input {
        padding: 8px 4px;
        font-size: 0.80rem;
    }
    .home-search-hero-btn {
        padding: 8px 10px;
        font-size: 0.78rem;
        gap: 3px;
    }
}

@media (max-width: 480px) {
    .nav-icons .nav-btn { height: 30px; min-width: 68px; font-size: 12px; padding: 0 10px; }
    .nav-icons .nav-btn-secondary { height: 30px; min-width: 68px; font-size: 12px; padding: 0 10px; }
    .notif-dropdown {
        right: -120px;
        width: 300px;
    }
}

@media (max-width: 480px) {
    /* Banner responsive styles moved to banner-engine.css */
    .product-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .product-card-image { height: 160px; }
    .product-card-body { padding: 10px; }
    .product-card-body h3 { font-size: 0.85rem; }
    .product-card-body .product-price .current { font-size: 1rem; }
    .section { padding: 32px 0; }
    .footer-grid { grid-template-columns: 1fr; }
    .store-info-logo { width: 80px; height: 80px; }
    .store-header { height: 160px; }
    .auth-box { padding: 20px; }
}

@media (max-width: 425px) {
    /* Banner responsive styles moved to banner-engine.css */
    .store-grid { grid-template-columns: 1fr; gap: 12px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .product-card-image { height: 170px; }
    .footer-grid { grid-template-columns: 1fr; }
    .page-header { padding: 60px 0 20px; }
    .page-header h1 { font-size: 1.4rem; }
    .dashboard-main { padding: 16px; }
    .dashboard-cards { grid-template-columns: 1fr; }
    .dash-card { padding: 16px; }
    .dash-card .dash-value { font-size: 1.4rem; }
    .table-wrapper { overflow-x: auto; }
    .table { min-width: 600px; }
    .modal { margin: 10px; }
}

@media (max-width: 380px) {
    /* Banner responsive styles moved to banner-engine.css */
    .nav-container { padding: 0 10px; gap: 8px; }
    .nav-logo { font-size: 1.1rem; }
    .nav-logo i { font-size: 1.3rem; }
    .product-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .product-card-image { height: 130px; }
    .product-card-body { padding: 8px; }
    .product-card-body h3 { font-size: 0.78rem; }

    .section { padding: 24px 0; }
    .container { padding: 0 10px; }
    .store-info-section { margin-top: -32px; }
    .store-info-logo { width: 56px; height: 56px; font-size: 1.3rem; }
    .store-header { height: 120px; }
    .auth-box { padding: 14px; }
}