/* Responsive Layout Fixes - Complete Overhaul with Robust JS Targeting */

/* ========== MOBILE & TABLET (Vertical Stack) ========== */
@media (max-width: 1023px) {
    
    /* Main Container - HYPER Compact Grid */
    /* We switch to Grid to put Logo and Icons on the same line */
    .header-flex-custom {
        display: grid !important;
        grid-template-columns: 1fr auto !important; /* Left space for logo, Right for icons */
        grid-template-rows: auto auto !important;
        align-items: center !important;
        gap: 0.5rem !important; 
        padding-top: 0.5rem !important; 
        padding-bottom: 0.5rem !important; 
        height: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 1. Logo (Top Left) */
    .logo-custom {
        grid-row: 1 !important;
        grid-column: 1 !important;
        width: 100% !important;
        text-align: left !important;
        display: flex !important;
        justify-content: flex-start !important;
        margin-bottom: 0 !important;
        transform: scale(0.85) !important; /* Smaller logo */
        transform-origin: left center !important;
        padding-left: 0.5rem !important;
    }

    /* 2. Account & Cart (Top Right) */
    .account-cart-custom {
        grid-row: 1 !important;
        grid-column: 2 !important;
        width: auto !important;
        justify-content: flex-end !important;
        display: flex !important;
        flex-direction: row !important; 
        align-items: center !important;
        gap: 1rem !important; /* Tight icons */
        margin: 0 !important;
        padding-right: 0.5rem !important;
    }

    /* FIX: Icons Size */
    .account-cart-custom svg,
    .account-cart-custom button svg,
    header button svg {
        width: 22px !important; 
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        stroke-width: 2px !important; 
        color: var(--primary-accent) !important; 
    }

    /* 3. Search Bar (Row 2 - Full Width) */
    .search-container-custom {
        grid-row: 2 !important;
        grid-column: 1 / span 2 !important; /* Span full width */
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Mobile Input Specifics - Larger for Usability */
    header input {
        width: 100% !important;
        text-align: center !important;
        font-size: 16px !important; /* Better readability */
        padding: 10px 15px !important; 
        height: 48px !important; /* Robust touch target */
        margin-top: 0.25rem !important; /* Slight spacing from top row */
    }
    
    /* Navigation Links - Ultra Compact */
    header > div:last-child nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        padding: 0.25rem !important;
        margin-top: 0 !important;
    }
    
    /* Better Nav Text for Touch - Clean */
    header > div:last-child nav a {
        font-size: 1rem !important; 
        padding: 0.5rem 0.75rem !important;
        font-weight: 500 !important;
        background: transparent !important; /* Removed box look */
        border: none !important;
    }
}

/* ========== DESKTOP (Horizontal Row) ========== */
@media (min-width: 1024px) {
    
    /* Main Container - Row */
    .header-flex-custom {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 1280px !important;
        margin: 0 auto !important;
        padding: 0.5rem 1rem !important;
    }

    /* 1. Logo - Left Side */
    .logo-custom {
        margin-right: auto !important; /* Pushes everything else to the right */
        flex-shrink: 0 !important;
    }

    /* 2. Account & Cart - Middle/Right Side */
    .account-cart-custom {
        display: flex !important;
        align-items: center !important;
        gap: 2rem !important;
        margin-right: 3rem !important; /* Separation from Search */
        flex-shrink: 0 !important;
    }

    /* 3. Search - Right Side (because JS moved it to end) */
    .search-container-custom {
        width: 350px !important;
        flex-shrink: 0 !important;
    }
}