/* =========================================================
   ROYAL STAY - SHARED HEADER / NAVBAR FIX
   Makes the injected header identical in width/layout to index.html
========================================================= */

/* The page-level wrapper must never constrain the shared header. */
body > .container:has(> #header),
body > .container:has(> #header) > #header {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Full-width top bar, exactly like the index layout. */
#header .top-bar {
    width: 100% !important;
    max-width: none !important;
}

/* Header content keeps the same centered 1320px inner width. */
#header .header > .container,
#header .navbar > .container,
#header .mobile-search > .container {
    width: min(92%, var(--container)) !important;
    max-width: var(--container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Desktop navigation is centered and uses the same width as index. */
#header .navbar {
    width: 100% !important;
}

#header .navbar > .container.nav-container {
    width: min(92%, var(--container)) !important;
    max-width: var(--container) !important;
    display: flex !important;
    justify-content: center !important;
}

#header .nav-menu {
    width: 100% !important;
    max-width: 1100px !important;
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* Never allow browser/default page styles to underline header links. */
#header a,
#header .top-bar a,
#header .header a,
#header .navbar a,
#header .nav-menu a,
#header .nav-menu > li > a,
#header .mega-menu a {
    text-decoration: none !important;
}

#header .nav-menu > li > a {
    color: var(--white) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 18px 22px !important;
}

#header .nav-menu > li > a:hover,
#header .nav-menu > li.active > a {
    color: var(--gold) !important;
}

#header .top-bar a {
    color: var(--white) !important;
}

#header .top-bar a:hover {
    color: var(--gold) !important;
}

/* Keep the header visually independent from page-specific CSS. */
#header,
#header > .top-bar,
#header > .header,
#header > .navbar {
    box-sizing: border-box !important;
}

@media (max-width: 1100px) {
    #header .nav-menu > li > a {
        padding: 17px 14px !important;
    }
}

@media (max-width: 768px) {
    #header .navbar > .container,
    #header .navbar > .container.nav-container {
        width: 100% !important;
        max-width: none !important;
    }

    #header .nav-menu {
        max-width: none !important;
    }
}

/* =========================================================
   INDEX-EXACT DESKTOP NAVIGATION
========================================================= */
#header .navbar { min-height: 0 !important; padding: 0 !important; }
#header .nav-menu { min-height: 58px !important; height: auto !important; margin: 0 !important; padding: 0 !important; }
#header .nav-menu > li { margin: 0 !important; padding: 0 !important; }
#header .nav-menu > li > a { display: flex !important; align-items: center !important; gap: 7px !important; padding: 18px 22px !important; min-height: 58px !important; line-height: 1.6 !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; }
#header .nav-menu > li > a i { font-size: 12px !important; }


/* =========================================================
   FULL-WIDTH FIX FOR HOME / LIVING / BEDROOM
   Keeps inner .container sections unchanged.
   Removes the Bootstrap outer wrapper gap visible at
   the left/right edge of these pages.
========================================================= */

body > .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body > .container > #header {
    width: 100%;
}

body > .container > .living-banner,
body > .container > .bedroom-banner,
body > .container > .hero {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 1200px) {
    body > .container {
        width: 100% !important;
    }
}

.page-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}


/* MOBILE HEADER OVERRIDES */
@media(max-width:768px){
 #header .header>.container,#header .mobile-search>.container{width:92%!important;max-width:none!important}
 #header .mobile-search .search-box,#header .mobile-search>.search-box{width:100%!important;max-width:none!important}
 #header .navbar{top:126px!important;width:min(320px,88vw)!important;height:calc(100vh - 126px)!important}
 #header .navbar.active{left:0!important}
 #header .nav-menu>li>a{min-height:52px!important;padding:14px 20px!important;background:#fff!important;color:#333!important;font-size:14px!important}
 #header .mega-menu{width:100%!important;padding:14px 20px 18px!important;background:#faf8f5!important;box-shadow:none!important}
}
@media(max-width:480px){#header .navbar{top:119px!important;height:calc(100vh - 119px)!important}}