/* ======================================================
   Sarekam CSS — responsive.css
   Extracted from index.html | Phase 1 Refactor
   DO NOT add styles from other sections to this file.
   ====================================================== */

        @media (max-width: 800px) {
            .header-left, .header-center, .header-actions {
                display: contents !important;
            }
            .mobile-header-tools { display: none !important; }
            
            .header-container {
                display: grid !important;
                grid-template-columns: auto 1fr auto auto;
                grid-template-rows: auto auto;
                gap: 12px 12px !important;
                width: 100% !important;
                padding: 0 16px !important;
                box-sizing: border-box !important;
            }
            
            .location-picker { 
                grid-column: 1; grid-row: 1;
                margin-bottom: 0; 
                padding-left: 0; 
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 2px;
            }
            .loc-title-row { margin-bottom: 0; }
            
            .brand-logo { 
                grid-column: 2; grid-row: 1;
                display: block !important; 
                font-size: 1.65rem; 
                margin: 0; 
                align-self: center;
                justify-self: center;
                text-transform: capitalize;
            }
            
            .header-cart-btn {
                grid-column: 3 / 5; grid-row: 1;
                justify-self: end;
                align-self: center;
                display: flex !important;
            }
            
            .search-container { 
                grid-column: 1 / 3; grid-row: 2;
                margin: 0; 
                height: 46px; 
                width: 100%;
                box-sizing: border-box;
            }
            
            .header-bookmark-btn {
                grid-column: 3; grid-row: 2;
                display: flex !important;
                align-self: center;
                width: 42px; height: 42px;
            }
            
            .header-profile-btn {
                grid-column: 4; grid-row: 2;
                display: flex !important;
                align-self: center;
            }
            
            /* Smooth collapse animation for top row */
            .location-picker,
            .brand-logo {
                max-height: 60px;
                opacity: 1;
                overflow: hidden;
                transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1),
                            opacity 0.22s ease,
                            margin 0.28s ease,
                            padding 0.28s ease;
                will-change: max-height, opacity;
            }
            .header {
                transition: padding 0.28s cubic-bezier(0.4,0,0.2,1);
            }
            .header-container {
                transition: gap 0.28s cubic-bezier(0.4,0,0.2,1);
            }

            /* Scrolled state — smoothly collapse top row */
            .header.scrolled-mobile .location-picker,
            .header.scrolled-mobile .brand-logo {
                max-height: 0 !important;
                opacity: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                pointer-events: none;
            }
            .header.scrolled-mobile .header-container {
                grid-template-columns: 1fr auto auto auto;
                grid-template-rows: auto;
                gap: 0 12px !important;
            }
            .header.scrolled-mobile .search-container { grid-column: 1; grid-row: 1; }
            .header.scrolled-mobile .header-bookmark-btn { grid-column: 2; grid-row: 1; }
            .header.scrolled-mobile .header-profile-btn { grid-column: 3; grid-row: 1; }
            .header.scrolled-mobile .header-cart-btn { grid-column: 4; grid-row: 1; }
        }

        /* ================= RESPONSIVE ADJUSTMENTS ================= */
        @media (max-width: 800px) {
            /* Desktop rows hidden on mobile */
            .header-search-row { display: none; }
            .brand-logo { display: none; }
            .header-actions { display: none; }

            /* Mobile: show location pill + action icons in top row */
            .mobile-location {
                display: flex;
                flex-direction: column;
                flex: 1;
                cursor: pointer;
                padding: 2px 0;
                margin-right: 10px;
                overflow: hidden;
            }
            .mobile-header-tools { display: flex; }

            /* Mobile header: 2-row grid, compact */
            .header { padding: 12px 0 10px; gap: 0; }
            /* main-content: small top gap, big bottom gap for bottom nav */
            .main-content { padding-top: 20px !important; padding-bottom: 90px !important; }

            /* Show mobile bottom nav */
            .mobile-bottom-nav { display: block; }
        }