/* ============================================================
   RESPONSIVE SYSTEM
   Breakpoints: 320, 375, 425, 768, 1024, 1440, 2560
   ============================================================ */

/* ---- 320px: Mobile S ---- */
@media screen and (max-width: 374px) {
    .container { padding: 0 var(--space-3); }
    .section { padding: var(--space-10) 0; }
    .section-title { font-size: 1.4rem; margin-bottom: var(--space-5); }
    .section-title::after { width: 36px; height: 2px; }

    /* Narrow navbar for small screens */
    .navbar { padding: var(--space-2) 0; }
    .nav-container { gap: var(--space-2); }
    .logo { font-size: 0.8rem; }
    .logo i { font-size: 0.9rem; }
    .nav-actions { gap: var(--space-1); }
    .theme-toggle, .search-toggle, .menu-toggle { width: 30px; height: 30px; font-size: 0.85rem; }

    /* Mobile menu — use panel, hide inline nav */
    .menu-toggle { display: flex; }
    .nav-menu { display: none; }

    .hero { min-height: 65vh; }
    .hero h1 { font-size: 1.6rem; }
    .hero p { font-size: 0.85rem; }
    .hero-content { padding: 10vh var(--space-3) 0; }

    /* Single column grids */
    .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
    .grid { gap: var(--space-3); }

    /* Filter — slide-in drawer from left */
    .filter-toggle-btn { display: flex; }
    .filter-close-btn { display: flex; }
    .products-layout { flex-direction: column; gap: 0; }
    .filter-sidebar {
        position: fixed; top: 0; left: -320px; width: 300px;
        height: 100vh; max-height: 100vh;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: calc(var(--z-fixed) + 1);
        box-shadow: 5px 0 30px rgba(0,0,0,0.2);
        padding: 0;
    }
    .filter-heading { padding-top: var(--space-16); }
    .filter-sidebar.open { left: 0; }
    .products-grid { grid-template-columns: 1fr; gap: var(--space-3); }

    /* Modal — full width, single column */
    .modal-content { max-width: 100%; border-radius: var(--radius-lg); }
    .modal-header { padding: var(--space-4) var(--space-4) var(--space-3); }
    .modal-header h2 { font-size: 1.1rem; }
    .modal-body { padding: var(--space-4); }
    .modal-grid { grid-template-columns: 1fr; gap: var(--space-4); }

    /* Footer — single column */
    .footer-content { grid-template-columns: 1fr; gap: var(--space-6); }
    footer { padding: var(--space-10) 0 var(--space-6); }

    /* Full-width buttons */
    .btn { padding: 0.65rem 1.2rem; font-size: 0.78rem; width: 100%; text-align: center; }
    .btn-secondary { width: 100%; text-align: center; }

    .product-image-container { padding-top: 110%; }
    .accordion-header { font-size: 0.78rem; padding: 0 var(--space-3); height: 2.4rem; }

    /* Search modal — compact */
    .search-modal { max-width: 96%; max-height: 78vh; border-radius: var(--radius-lg); }
    .search-modal-header { padding: var(--space-3); gap: var(--space-2); }
    .search-modal-header .search-input-inline { 
        font-size: 0.8rem; 
        padding: var(--space-2) var(--space-3);
        height: 2.2rem;
        flex: 1;
        min-width: 0;
    }
    .search-modal-close-btn { width: 30px; height: 30px; font-size: 0.8rem; flex-shrink: 0; }
    .search-results-count { padding: var(--space-2) var(--space-3); font-size: 0.7rem; }
    .search-item { padding: var(--space-2); gap: var(--space-2); }
    .item-icon { width: 32px; height: 32px; font-size: 0.8rem; }
    .item-title { font-size: 0.78rem; }
    .item-type { font-size: 0.55rem; padding: 1px 5px; }
    .item-desc { font-size: 0.7rem; }
    .item-meta { font-size: 0.7rem; gap: var(--space-1); }
}

/* ---- 375px: Mobile M ---- */
@media screen and (min-width: 375px) and (max-width: 424px) {
    .container { padding: 0 var(--space-3); }
    .section { padding: var(--space-10) 0; }
    .section-title { font-size: 1.5rem; margin-bottom: var(--space-5); }
    .section-title::after { width: 40px; height: 2px; }

    /* Narrow navbar */
    .navbar { padding: var(--space-2) 0; }
    .nav-container { gap: var(--space-2); }
    .logo { font-size: 0.85rem; }
    .logo i { font-size: 0.95rem; }
    .nav-actions { gap: var(--space-1); }
    .theme-toggle, .search-toggle, .menu-toggle { width: 30px; height: 30px; font-size: 0.9rem; }

    /* Mobile menu */
    .menu-toggle { display: flex; }
    .nav-menu { display: none; }

    .hero { min-height: 68vh; }
    .hero h1 { font-size: 1.7rem; }
    .hero p { font-size: 0.88rem; }

    /* Single column grids */
    .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
    .grid { gap: var(--space-3); }

    /* Filter drawer */
    .filter-toggle-btn { display: flex; }
    .filter-close-btn { display: flex; }
    .products-layout { flex-direction: column; gap: 0; }
    .filter-sidebar {
        position: fixed; top: 0; left: -340px; width: 320px;
        height: 100vh; max-height: 100vh;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: calc(var(--z-fixed) + 1);
        box-shadow: 5px 0 30px rgba(0,0,0,0.2);
        padding: 0;
    }
    .filter-heading { padding-top: var(--space-16); }
    .filter-sidebar.open { left: 0; }
    .products-grid { grid-template-columns: 1fr; gap: var(--space-3); }

    /* Modal */
    .modal-content { max-width: 97%; }
    .modal-header { padding: var(--space-4) var(--space-4) var(--space-3); }
    .modal-header h2 { font-size: 1.15rem; }
    .modal-body { padding: var(--space-4); }
    .modal-grid { grid-template-columns: 1fr; gap: var(--space-4); }

    /* Footer */
    .footer-content { grid-template-columns: 1fr; gap: var(--space-6); }
    footer { padding: var(--space-10) 0 var(--space-6); }

    .btn { padding: 0.7rem 1.4rem; font-size: 0.8rem; width: 100%; text-align: center; }
    .btn-secondary { width: 100%; text-align: center; }
}

/* ---- 425px: Mobile L ---- */
@media screen and (min-width: 425px) and (max-width: 767px) {
    .container { padding: 0 var(--space-4); }
    .section { padding: var(--spacing-md) 0; }
    .section-title { font-size: 1.7rem; }

    /* Narrow navbar */
    .navbar { padding: var(--space-2) 0; }
    .nav-container { gap: var(--space-3); }
    .logo { font-size: 0.9rem; }
    .logo i { font-size: 1rem; }
    .nav-actions { gap: var(--space-1); }
    .theme-toggle, .search-toggle, .menu-toggle { width: 32px; height: 32px; font-size: 0.9rem; }

    /* Mobile menu */
    .menu-toggle { display: flex; }
    .nav-menu { display: none; }

    .hero { min-height: 75vh; }
    .hero h1 { font-size: 2rem; }

    /* Two column grids where possible */
    .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-2 { grid-template-columns: 1fr 1fr; }

    /* Filter drawer */
    .filter-toggle-btn { display: flex; }
    .filter-close-btn { display: flex; }
    .products-layout { flex-direction: column; gap: 0; }
    .filter-sidebar {
        position: fixed; top: 0; left: -360px; width: 340px;
        height: 100vh; max-height: 100vh;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: calc(var(--z-fixed) + 1);
        box-shadow: 5px 0 30px rgba(0,0,0,0.2);
        padding: 0;
    }
    .filter-heading { padding-top: var(--space-16); }
    .filter-sidebar.open { left: 0; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

    /* Modal */
    .modal-content { max-width: 95%; }
    .modal-header { padding: var(--space-4) var(--space-5) var(--space-3); }
    .modal-header h2 { font-size: 1.2rem; }
    .modal-body { padding: var(--space-4); }
    .modal-grid { grid-template-columns: 1fr; gap: var(--space-5); }

    /* Footer — two columns */
    .footer-content { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}

/* ---- 768px: Tablet ---- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .container { padding: 0 var(--space-4); }
    .section-title { font-size: 2.2rem; }

    /* Narrow navbar */
    .navbar { padding: var(--space-2) 0; }
    .nav-container { gap: var(--space-3); }
    .logo { font-size: 0.95rem; }
    .logo i { font-size: 1.05rem; }
    .nav-actions { gap: var(--space-2); }
    .theme-toggle, .search-toggle { width: 32px; height: 32px; font-size: 0.9rem; }

    /* Desktop nav — inline menu */
    .menu-toggle { display: none; }
    .nav-menu { display: flex; }
    .nav-menu .nav-link { padding: var(--space-2); font-size: 0.65rem; border-bottom: none; width: auto; }
    .nav-link::after { display: block; }

    .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

    /* Filter — still a drawer on tablet */
    .filter-toggle-btn { display: flex; }
    .filter-close-btn { display: flex; }
    .products-layout { flex-direction: column; gap: 0; }
    .filter-sidebar {
        position: fixed; top: 0; left: -380px; width: 350px;
        height: 100vh; max-height: 100vh;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: calc(var(--z-fixed) + 1);
        box-shadow: 5px 0 30px rgba(0,0,0,0.2);
        padding: 0;
    }
    .filter-heading { padding-top: var(--space-16); }
    .filter-sidebar.open { left: 0; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

    /* Modal — single column */
    .modal-content { max-width: 650px; }
    .modal-grid { grid-template-columns: 1fr; gap: var(--space-5); }

    .footer-content { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
    .hero h1 { font-size: 2.8rem; }
}

/* ---- 1024px: Laptop ---- */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
    .container { max-width: 1200px; }
    .section-title { font-size: 2.6rem; }

    /* Desktop nav */
    .menu-toggle { display: none; }
    .nav-menu { gap: var(--space-3); }
    .nav-link { font-size: 0.78rem; }

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

    /* Filter — sticky sidebar (no drawer) */
    .filter-toggle-btn { display: none; }
    .filter-close-btn { display: none; }
    .filter-overlay { display: none !important; }
    .products-layout { flex-direction: row; }
    .filter-sidebar {
        position: sticky; left: auto; width: 230px;
        height: auto; max-height: calc(100vh - 100px);
        border-radius: var(--radius-md); box-shadow: none;
        padding: 0;
    }
    .filter-heading { padding-top: var(--space-4); padding-left: var(--space-4); padding-right: var(--space-4); }
    .products-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

    /* Modal — two columns */
    .modal-content { max-width: 800px; }
    .modal-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }

    .footer-content { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
    .hero h1 { font-size: 3.2rem; }
}

/* ---- 1440px: Laptop L ---- */
@media screen and (min-width: 1440px) and (max-width: 2559px) {
    .container { max-width: 1400px; }
    .section-title { font-size: 3rem; }

    .menu-toggle { display: none; }
    .nav-menu { gap: var(--space-4); }
    .nav-link { font-size: 0.82rem; }

    /* Filter — sticky sidebar */
    .filter-toggle-btn { display: none; }
    .filter-close-btn { display: none; }
    .filter-overlay { display: none !important; }
    .products-layout { flex-direction: row; }
    .filter-sidebar { position: sticky; width: 250px; height: auto; max-height: calc(100vh - 100px); border-radius: var(--radius-md); box-shadow: none; padding: 0; }
    .filter-heading { padding-top: var(--space-4); padding-left: var(--space-4); padding-right: var(--space-4); }
    .products-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

    /* Modal — two columns */
    .modal-content { max-width: 900px; }
    .modal-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }

    .footer-content { grid-template-columns: repeat(4, 1fr); gap: var(--space-10); }
    .hero h1 { font-size: 3.8rem; }
}

/* ---- 2560px: 4K ---- */
@media screen and (min-width: 2560px) {
    html { font-size: 20px; }
    .container { max-width: 2200px; }
    .section-title { font-size: 4rem; }

    .menu-toggle { display: none; }
    .nav-menu { gap: var(--space-6); }
    .nav-link { font-size: 0.9rem; }

    /* Filter — sticky sidebar */
    .filter-toggle-btn { display: none; }
    .filter-close-btn { display: none; }
    .filter-overlay { display: none !important; }
    .products-layout { flex-direction: row; }
    .filter-sidebar { position: sticky; width: 300px; height: auto; max-height: calc(100vh - 100px); border-radius: var(--radius-md); box-shadow: none; padding: 0; }
    .filter-heading { padding-top: var(--space-4); padding-left: var(--space-4); padding-right: var(--space-4); }
    .products-grid { grid-template-columns: repeat(5, 1fr); gap: var(--space-6); }

    /* Modal — two columns */
    .modal-content { max-width: 1100px; }
    .modal-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }

    .footer-content { grid-template-columns: repeat(4, 1fr); gap: var(--space-12); }
    .hero h1 { font-size: 5rem; }
}

/* ============================================================
   LANDSCAPE ORIENTATION
   ============================================================ */

/* ---- Mobile S Landscape ---- */
@media screen and (max-width: 374px) and (orientation: landscape) {
    .navbar { padding: var(--space-1) 0; }
    .logo { font-size: 0.75rem; }
    .hero { min-height: 100vh; }
    .hero h1 { font-size: 1.4rem; }
    .hero-content { padding-top: 10vh; }
    .modal-content { max-height: 80vh; padding: var(--space-3); }
    .modal-grid { grid-template-columns: 1fr; }
    .filter-sidebar { width: 280px; }
}

/* ---- Mobile M Landscape ---- */
@media screen and (min-width: 375px) and (max-width: 424px) and (orientation: landscape) {
    .navbar { padding: var(--space-1) 0; }
    .logo { font-size: 0.8rem; }
    .hero { min-height: 100vh; }
    .hero h1 { font-size: 1.5rem; }
    .hero-content { padding-top: 10vh; }
    .modal-content { max-height: 80vh; padding: var(--space-3); }
    .modal-grid { grid-template-columns: 1fr; }
    .filter-sidebar { width: 300px; }
}

/* ---- Mobile L Landscape ---- */
@media screen and (min-width: 425px) and (max-width: 767px) and (orientation: landscape) {
    .navbar { padding: var(--space-1) 0; }
    .logo { font-size: 0.85rem; }
    .hero { min-height: 100vh; }
    .hero h1 { font-size: 1.6rem; }
    .hero-content { padding-top: 10vh; }
    .modal-content { max-height: 80vh; padding: var(--space-4); }
    .modal-grid { grid-template-columns: 1fr 1fr; }
    .filter-sidebar { width: 320px; }
    .filter-heading { padding-top: var(--space-12); }
}

/* ---- Tablet Landscape ---- */
@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .navbar { padding: var(--space-1) 0; }
    .logo { font-size: 0.9rem; }
    .hero { min-height: 100vh; }
    .hero h1 { font-size: 2.4rem; }
    .hero-content { padding-top: 10vh; }
    .modal-content { max-height: 80vh; padding: var(--space-4); }
    .modal-grid { grid-template-columns: 1fr 1fr; }
    .filter-sidebar { width: 340px; }
    .filter-heading { padding-top: var(--space-12); }
}

/* ---- Print ---- */
@media print {
    .navbar, footer, .search-container, .modal-overlay, .search-modal-panel, .filter-toggle-btn, .filter-overlay { display: none !important; }
    body { background: white; color: black; }
    .container { max-width: 100%; padding: 0; }
}