:root {
    /* Default variables set to your homepage values */
    --header-padding: 2rem;
    --logo-height: 80px;
    --mega-menu-top-position: 85px;
}

/* --- Base Header & Logo Styles --- */
#main-header {
    padding: var(--header-padding);
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, padding 0.3s ease-in-out;
    
    /* FIX: Header is Z-50. This creates the white background layer. */
    z-index: 50 !important; 
    position: fixed; /* Ensure stacking context */
}

/* FIX: Logo Container gets Z-60 to sit ON TOP of the white header layer */
#main-header a[href="/home"] {
    position: relative;
    z-index: 60; 
}

.logo-img {
    height: var(--logo-height);
    width: auto;
    transition: height 0.3s ease;
}

.logo-black { 
    display: none; 
}

/* --- Mobile Specifics --- */
@media (max-width: 1023px) {
    :root {
        --header-padding: 1.25rem; 
        --logo-height: 50px; 
    }
    #main-header {
        padding: var(--header-padding);
    }
}


/* --- Homepage Specific Styles --- */
.is-homepage {
    --header-padding: 2rem;
    --logo-height: 80px;
    --mega-menu-top-position: 85px;
}
/* Mobile Override for Homepage */
@media (max-width: 1023px) {
    .is-homepage {
        --header-padding: 1.5rem;
        --logo-height: 55px; 
    }
}

.is-homepage #header-inner-container {
    padding-left: 2rem;
    padding-right: 2rem;
}
@media (max-width: 1023px) {
    .is-homepage #header-inner-container { padding: 0; }
}

/* --- Header Scroll Behavior (Homepage ONLY) --- */
.is-homepage .header-hidden {
    transform: translateY(-100%);
}
.is-homepage .header-scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    
    /* AESTHETIC FIX: Replaced shadow with subtle border for a cleaner, premium look */
    box-shadow: none;
    border-bottom: 1px solid #f3f4f6;
    
    --header-padding: 0rem;
    --logo-height: 60px;
    --mega-menu-top-position: 50px; 
}
/* Mobile Scroll Override */
@media (max-width: 1023px) {
    .is-homepage .header-scrolled {
         --header-padding: 1rem;
         --logo-height: 45px;
    }
}

.is-homepage .header-scrolled .header-text, 
.is-homepage .header-scrolled a, 
.is-homepage .header-scrolled svg,
.is-homepage .header-scrolled button {
    color: #202328 !important;
    stroke: #202328 !important;
}
.is-homepage .header-scrolled .logo-white { display: none; }
.is-homepage .header-scrolled .logo-black { display: block; }

/* --- Shop Page & All Other Non-Homepage Styles --- */
.is-shoppage #main-header {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    
    /* AESTHETIC FIX: Subtle border instead of shadow */
    box-shadow: none;
    border-bottom: 1px solid #f3f4f6;
    
    padding: 0rem; 
}
@media (max-width: 1023px) {
    .is-shoppage #main-header { 
        padding: 1rem;
    }
}

.is-shoppage {
    --logo-height: 60px;
    --mega-menu-top-position: 50px; 
}
@media (max-width: 1023px) {
    .is-shoppage { --logo-height: 45px; }
}

.is-shoppage #header-inner-container {
    padding: 0.25rem 2rem;
}
@media (max-width: 1023px) {
    .is-shoppage #header-inner-container { padding: 0; }
}

/* BUG FIX (black text on black buttons): these selectors used to be unscoped -
   `.is-shoppage a` / `.is-shoppage button` matched EVERY link and button on the whole page
   (because .is-shoppage lives on <body>), and forced them to #202328 with !important.
   That beat Tailwind's `text-white`, so any dark button - "Book an Appointment",
   "Enquire Now", "Add to Cart", "Subscribe", "Submit Request" - rendered black-on-black.
   Now scoped to the header only, which is all these rules were ever meant to recolour. */
.is-shoppage #main-header .header-text,
.is-shoppage #main-header a,
.is-shoppage #main-header svg,
.is-shoppage #main-header button {
    color: #202328 !important;
    stroke: #202328 !important;
}
.is-shoppage .logo-white { display: none; }
.is-shoppage .logo-black { display: block; }
/* The mobile menu lives inside #main-header, so the two recolour rules above (shop pages and
   the scrolled homepage) painted the dark "Book Appointment" button's text black-on-black. */
#main-header #mobile-menu-panel .mobile-cta,
.is-homepage .header-scrolled #mobile-menu-panel .mobile-cta { color: #ffffff !important; }


/* --- Mega Menu Styling (Desktop) --- */
.nav-item { position: relative; }
.mega-menu { 
    display: none; 
    position: fixed; 
    top: var(--mega-menu-top-position); 
    left: 0; 
    width: 100vw; 
    background-color: rgba(255, 255, 255, 0.98); 
    backdrop-filter: blur(12px); 
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); 
    animation: fadeInDown 0.4s ease-out;
    transition: top 0.3s ease;
    
    /* FIX: Z-40 puts it BEHIND the header (Z-50). 
       This means the menu content will slide out from underneath the white header bar. */
    z-index: 40; 
}
@media (min-width: 1024px) {
    .nav-item:hover .mega-menu { display: block; }
}

@keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.mega-menu-content { max-width: 1280px; margin: 0 auto; padding: 3rem 2rem; }
.mega-menu a { color: #555; transition: color 0.2s ease-in-out; }
.mega-menu a:hover { color: #C09B48; }
.nav-item > a { position: relative; transition: background-color 0.2s ease-in-out; padding: 0.5rem 1rem; border-radius: 4px; }

/* Different hover for transparent vs solid header */
.is-homepage .nav-item > a:hover { background-color: rgba(255, 255, 255, 0.1); }
.is-homepage .header-scrolled .nav-item > a:hover,
.is-shoppage .nav-item > a:hover { background-color: rgba(0, 0, 0, 0.05); }

.mega-menu-item h3 { font-family: 'Canela', serif; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 1rem; color: #202328; text-align: center; }
.mega-menu-item img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; max-height: 120px; border-radius: 0; }
.mega-menu-vertical-list h3 { text-align: left; font-family: 'Canela', serif; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; color: #202328; }
.mega-menu-vertical-list a { display: block; margin-bottom: 0.5rem; }
/* Appointment card in the High Jewellery menu. It used to turn solid black on hover, which
   read as the tile "blacking out"; now it lifts, warms and the arrow slides. */
.mega-menu-appointment-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.45rem; height: 100%; min-height: 148px; padding: 1.5rem 1rem; text-align: center;
    background: #ffffff; border: 1px solid #ded8cb;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.mega-menu-appointment-btn .appt-eyebrow {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.62rem;
    text-transform: uppercase; letter-spacing: 0.22em; color: #C09B48;
}
.mega-menu-appointment-btn .appt-title {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: 'Canela', serif; font-size: 0.9rem; text-transform: uppercase;
    letter-spacing: 0.07em; color: #202328; white-space: nowrap; transition: color 0.3s ease;
}
.mega-menu-appointment-btn .appt-title svg { transition: transform 0.3s ease, stroke 0.3s ease; }
.mega-menu-appointment-btn .appt-sub {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.7rem;
    letter-spacing: 0.02em; color: #8a8578; text-transform: none; line-height: 1.4;
}
.mega-menu-appointment-btn:hover {
    background-color: #fdfbf6; border-color: #C09B48;
    box-shadow: 0 10px 24px rgba(32, 35, 40, 0.08); transform: translateY(-2px);
}
.mega-menu-appointment-btn:hover .appt-title { color: #C09B48; }
.mega-menu-appointment-btn:hover .appt-title svg { transform: translateX(4px); stroke: #C09B48; }
.mega-menu-appointment-btn:focus-visible { outline: 2px solid #C09B48; outline-offset: 3px; }

/* --- Mobile Menu Styles (FIXED) --- */
#mobile-menu-overlay.visible {
    display: block;
    opacity: 1;
}
/* Ensure panel is full height and on top */
#mobile-menu-drawer, #mobile-menu-panel {
    height: 100vh; 
    top: 0;
    left: 0;
    z-index: 100; /* Higher than header */
    background-color: white;
    width: 85%;
    max-width: 350px;
}
#mobile-menu-drawer.visible, #mobile-menu-panel.visible {
    transform: translateX(0);
}
/* When menu is open, lock body scroll */
body.menu-open {
    overflow: hidden;
}