/* ==========================================================================
   Luxury Brand Mobile-First Media Layout Query Compilations
   ========================================================================== */

@media (max-width: 1200px) {
    .hero-title { font-size: 4.2rem; }
    .product-grid, .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .footer-top-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 992px) {
    * { cursor: auto !important; } /* Custom pointer tracking falls back on touchscreen interfaces */
    .cursor-glow { display: none; }
    
    .mobile-nav-toggle {
        display: block; position: relative; z-index: 1000;
        width: 30px; height: 20px; display: flex; flex-direction: column; justify-content: space-between;
    }
    
    .hamburger-bar { width: 100%; height: 2px; background: var(--luxury-ivory); transition: var(--transition-smooth); }
    
    /* Toggle State Changes Via Active JS Classes */
    .mobile-nav-toggle.active .hamburger-bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .mobile-nav-toggle.active .hamburger-bar:nth-child(2) { opacity: 0; }
    .mobile-nav-toggle.active .hamburger-bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    .nav-menu {
        position: fixed; top: 0; left: -100%; width: 100%; height: 100vh;
        background: var(--luxury-black); padding: 120px 40px;
        transition: var(--transition-smooth); z-index: 99;
    }
    
    .nav-menu.open { left: 0; }
    .nav-list { flex-direction: column; gap: 30px; }
    .nav-link { font-size: 1.2rem; }
    .mega-menu { display: none !important; } /* Simplify drop operations dynamically on compact screens */
    
    .header-container { padding: 0 20px; }
    .search-container { display: none; } /* Hide dense elements to keep layouts crisp */
    
    .tab-panel-grid, .blog-grid { grid-template-columns: 1fr; gap: 40px; }
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .side-drawer { width: 100%; right: -100%; }
}

@media (max-width: 576px) {
    .hero-title { font-size: 2.8rem; }
    .hero-cta-group { flex-direction: column; gap: 15px; }
    .product-grid, .categories-grid, .metrics-grid, .footer-top-grid, .masonry-gallery { grid-template-columns: 1fr; }
    .category-card { height: 400px; }
    .product-media { height: 380px; }
    .section-title { font-size: 1.8rem; }
    .modal-grid { grid-template-columns: 1fr; }
    .modal-media-frame img { height: 280px; }
    .modal-wrapper { padding: 20px; }
}