#main-header {
    background: var(--bg-surface);
    /* Keeping user requested existing color scheme for now, unless they actually wanted the RED background as part of layout visual. The prompt said "only style" then "Only layout change". I'll use existing var(--bg-surface) for now but prepared to switch. */
    /* WAIT - The user said "like attached pic. only style" initially, then "only layout change". 
       The picture HAS a deep red background. Implementing "layout" usually implies structure, but 
       the structure is heavily tied to the visual "red" bar look. 
       However, strict interpretation of "layout change" vs "color change" suggests keeping existing colors.
       BUT, a white 2-row navbar might look broken. 
       I will stick to generic layout styles first. */
    box-shadow: var(--shadow-sm);
    position: sticky;
    /* Changed from fixed to sticky to fix gap issue */
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0;
    /* Remove padding to let rows handle it */
}

/* Container becomes column */
.nav-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    /* Full width for the bar styling */
    padding: 0;
}

/* TOP ROW */
.top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 2rem;
    border-bottom: 1px solid var(--border);
    /* Separator */
}

.logo {
    font-family: var(--font-display);
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Search Bar - Push to Right */
.search-bar {
    width: 100%;
    /* Force expansion */
    max-width: 300px;
    /* Reduced by ~35% */
    margin-left: auto;
    /* Push away from Logo, towards Right */
}

/* ... existing input styles ... */
.search-input-wrapper {
    display: flex;
    align-items: center;
    background: #F3F4F6;
    border-radius: 2rem;
    padding: 0.5rem 1rem;
    width: 100%;
}

.search-input-wrapper input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    margin-left: 0.5rem;
    font-size: 0.85rem;
}

/* Nav Actions - Alignment Update */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.9rem;
    /* flex-grow removed to stop eating space */
    justify-content: flex-end;
    /* Align items Right */
    width: auto;
    /* Let it wrap content */
    /* width: 100% removed */
}

/* Nav Actions Children Alignment */
.nav-actions .lang-selector,
.nav-actions .location-selector,
.nav-actions #auth-section {
    display: flex;
    align-items: center;
    height: 100%;
    /* Ensure full height alignment */
}


/* Location Selector */
.nav-actions .location-selector {
    padding: 0.5rem;
    /* More space for symbol */
    margin: 0 0.5rem;
    transition: transform 0.2s;
}

.nav-actions .location-selector:hover {
    transform: scale(1.1);
}

/* Auth section standard alignment */
.nav-actions #auth-section {
    display: flex;
    align-items: center;
    /* margin-left: auto removed to prevent split */
}

.auth-btn,
.user-profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--primary);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    background: white;
    font-size: 0.75rem;
}

.auth-btn:hover {
    background: var(--primary);
    color: white;
}

/* BOTTOM ROW */
.bottom-row {
    background: var(--bg-surface);
    /* Or a slightly different shade if needed */
    padding: 0.8rem 5rem;
    border-bottom: 1px solid var(--border);
    overflow: visible;
    /* Fix for dropdown visibility */
}

@media (max-width: 900px) {
    .bottom-row {
        padding: 0.8rem 1rem;
        overflow-x: auto;
        /* Allow scroll on mobile */
    }
}

.nav-links {
    display: flex;
    width: 100%;
    justify-content: space-between;
    white-space: nowrap;
    align-items: center;
}

.nav-links a {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-main);
    text-transform: uppercase;
    transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
    color: #f97316;
    /* Orange */
}

/* Footer */
#main-footer {
    background: #184F9F;
    /* Matching Hero section 'Buy' button blue */
    color: #FFFFFF;
    padding: 1.5rem 0;
    margin-top: auto;
}

.footer-top-row {
    display: flex;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
}


.footer-nav-flat {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
}

.footer-nav-flat a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: opacity 0.2s;
}

.footer-nav-flat a:hover {
    opacity: 0.8;
}

.footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-social-section h4,
.footer-app-section h4 {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 1.25rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

.social-icons {
    display: flex;
    gap: 1.25rem;
}

.social-icon {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: all 0.3s ease;
}

.social-icon svg {
    width: 18px;
    height: 18px;
}

.social-icon:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
    transform: translateY(-2px);
}

.app-buttons {
    display: flex;
    gap: 1.25rem;
}

.app-btn img {
    height: 38px;
    border-radius: 6px;
    transition: transform 0.2s;
}

.app-btn:hover img {
    transform: scale(1.05);
}

.footer-copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 768px) {
    .footer-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .footer-nav-flat {
        gap: 1.5rem;
    }
}

/* Page Grids */
.grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-md);
}

.grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-md);
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    border-radius: 4px;
    border: 1px solid #eee;
    top: 100%;
    left: 0;
    padding: 0.5rem 0;
}

.dropdown-content a {
    color: var(--text-main);
    padding: 0.8rem 1rem;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: none;
    /* Keep dropdown items normal case */
    border-bottom: 1px solid #f9f9f9;
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background-color: #f3f4f6;
    color: var(--primary);
}

.dropdown:hover .dropdown-content {
    display: block;
}