/*
 * Lumina Noir - Native Header Styles
 * This file contains the zero-conflict CSS for the new header design.
 * Bypasses the 192 .nav-menu rules in the old theme.
 *
 * RECONSTRUCTED 2026-06-02 after the prior copy was overwritten by an
 * unrelated tool. All values come from the project's memory notes and
 * the prior session's edit history.
 */

/* Hide the custom premium header on mobile (let the theme's default mobile menu handle it) */
@media (max-width: 1024px) {
    .lumina-hybrid-layout { display: none !important; }
}

@media (min-width: 1025px) {
    /* --- NATIVE PREMIUM HEADER --- */
    .lumina-hybrid-layout {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        transition: all 0.3s ease;
        /* Gradient protection for readability against large typography backgrounds */
        background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    }

    .lumina-hybrid-layout.scrolled {
        background: rgba(10, 10, 18, 0.4);
        backdrop-filter: blur(22px) saturate(160%);
        -webkit-backdrop-filter: blur(22px) saturate(160%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 2px 24px rgba(0,0,0,0.18);
    }

    /* Ensure the auto-generated div wrapper by wp_nav_menu takes full height */
    .lumina-hybrid-layout nav > div[class*="menu-"] { height: 100%; display: flex; align-items: center; }

    .lumina-hybrid-layout .lumina-menu { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; height: 100%; }
    .lumina-hybrid-layout .lumina-menu > li { position: relative; height: 100%; display: flex; align-items: center; }

    /* The walker generates a.menu-link and span.menu-item-inner */
    .lumina-hybrid-layout .lumina-menu > li > a.menu-link {
        color: #e5e2e1;
        text-decoration: none;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 0.5px;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        display: flex;
        align-items: center;
        height: 100%;
        gap: 8px;
    }

    /* Hover Effect: Teal Color + Motion */
    .lumina-hybrid-layout .lumina-menu > li > a.menu-link:hover {
        color: #64C5B1;
        text-shadow: 0 0 10px rgba(100, 197, 177, 0.3);
        transform: translateY(-2px);
    }

    /* Glassmorphism Sub-Menu Dropdown */
    .lumina-hybrid-layout .lumina-menu ul.sub-menu {
        position: absolute;
        top: calc(100% - 15px);
        left: 50%;
        transform: translateX(-50%) translateY(0);
        background: rgba(19, 19, 19, 0.4);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        padding: 15px;
        min-width: 220px;
        max-height: 600px;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 20px 40px rgba(0,0,0,0.5);
        display: flex;
        flex-direction: column;
        gap: 5px;
        list-style: none;
    }

    .lumina-hybrid-layout .lumina-menu ul.sub-menu li { width: 100%; height: auto; }

    .lumina-hybrid-layout .lumina-menu ul.sub-menu a.menu-link {
        font-size: 15px;
        font-weight: 500;
        color: #ffffff;
        padding: 10px 15px;
        border-radius: 6px;
        width: 100%;
        display: block;
        transition: all 0.2s;
        background: transparent;
        text-decoration: none;
    }
    .lumina-hybrid-layout .lumina-menu ul.sub-menu a.menu-link:hover {
        background: rgba(255,255,255,0.1);
        color: #64C5B1;
        transform: translateX(3px);
    }

    /* Mega Menu Compatibility */
    .lumina-hybrid-layout .lumina-menu li.mega-menu > ul.sub-menu { width: 600px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 30px; }
    .lumina-hybrid-layout .lumina-menu li.mega-menu > ul.sub-menu .mega-menu-tagline { grid-column: 1 / -1; color: #8e9192; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }

    /* Left Menu Specifics (Categories Pill Button) */
    .lumina-hybrid-layout .lumina-left-menu > li > a.menu-link {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #ffffff;
        padding: 10px 24px;
        border-radius: 9999px;
        text-shadow: none;
        font-weight: 600;
        font-family: 'Inter', sans-serif !important;
        transform: none !important;
        transition: all 0.3s ease;
        height: 40px !important; display: inline-flex !important; justify-content: center; align-items: center;
    }
    .lumina-hybrid-layout .lumina-left-menu > li > a.menu-link:hover {
        background: #64C5B1;
        border-color: #64C5B1;
        color: #fff !important;
        box-shadow: 0 0 15px rgba(100, 197, 177, 0.6);
    }

    /* Hamburger Icon via CSS for the Categories button */
    .lumina-hybrid-layout .lumina-left-menu > li > a.menu-link::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 14px;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E");
        background-size: cover;
        margin-right: 8px;
    }

    .lumina-hybrid-layout .lumina-left-menu ul.sub-menu { left: 0; transform: translateY(0); }

    /* Center Menu Specifics */
    .lumina-hybrid-layout .lumina-middle-menu { gap: 30px; justify-content: center; }

    /* Right Menu Specifics */
    .lumina-hybrid-layout .lumina-right-menu { justify-content: flex-end; width: 100%; }
    .lumina-hybrid-layout .lumina-right-menu ul.sub-menu { left: auto; right: -15px; transform: translateY(15px); }

    /* Hover Reveal Triggers & Bridge */
    .lumina-hybrid-layout .lumina-menu li { position: relative; }
    .lumina-hybrid-layout .lumina-menu li > ul.sub-menu::before {
        content: '';
        position: absolute;
        top: -30px;
        left: 0;
        width: 100%;
        height: 30px;
        background: transparent;
        z-index: -1;
    }
    .lumina-hybrid-layout .lumina-menu li.menu-item-has-children:hover > ul.sub-menu,
    .lumina-hybrid-layout .lumina-menu li.mega-menu:hover > ul.sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
    .lumina-hybrid-layout .lumina-left-menu li.menu-item-has-children:hover > ul.sub-menu,
    .lumina-hybrid-layout .lumina-left-menu li.mega-menu:hover > ul.sub-menu { transform: translateY(0); }
    .lumina-hybrid-layout .lumina-right-menu li.menu-item-has-children:hover > ul.sub-menu { transform: translateY(0); }

    /* Hover Colors & Glow */
    .lumina-hybrid-layout .lumina-menu a { transition: color 0.3s, text-shadow 0.3s; }
    .lumina-hybrid-layout .lumina-menu a:hover {
        color: #64C5B1 !important;
        text-shadow: 0 0 10px rgba(79, 209, 197, 0.6);
    }

    /* Menu Item Badges (New & Hot) */
    .lumina-hybrid-layout .lumina-menu li > a .menu-item-text-container { position: relative; }
    .lumina-hybrid-layout .lumina-menu li.new > a .menu-item-text-container:before,
    .lumina-hybrid-layout .lumina-menu li.hot > a .menu-item-text-container:before {
        line-height: 1;
        position: absolute;
        display: inline-block;
        color: #fff;
        font-size: 9px;
        right: -24px;
        padding: 3px 5px 2px;
        top: -14px;
        border-radius: 3px;
        text-transform: uppercase;
        font-weight: bold;
    }
    .lumina-hybrid-layout .lumina-menu li.new > a .menu-item-text-container:before { content: 'new'; background: #ff2d55; }
    .lumina-hybrid-layout .lumina-menu li.hot > a .menu-item-text-container:before { content: 'hot'; background: #ff4757; }

    /* Custom Right Icons Styling - Outline */
    .lumina-hybrid-layout .lumina-right-menu { gap: 8px !important; }

    .btn-4k, .icon-btn, .btn-plus {
        display: inline-flex; align-items: center; justify-content: center;
        background: transparent !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 50% !important;
        width: 38px; height: 38px;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.3s ease !important;
    }
    .btn-4k { font-size: 13px; font-family: 'Inter', sans-serif; }
    /* 4K now uses the same .icon-btn shell as the Desktop button (so it behaves
       identically and no longer keeps a stuck green/teal fill on scroll). This
       styles the "4K" label that replaces the SVG inside that shell. */
    .icon-btn .icon-4k-text { font-size: 13px; font-weight: 700; font-family: 'Inter', sans-serif; line-height: 1; letter-spacing: 0.3px; color: #fff; }

    .btn-4k:hover, .icon-btn:hover, .btn-plus:hover {
        background-color: #64C5B1 !important;
        color: #ffffff !important;
        box-shadow: 0 0 20px rgba(79, 209, 197, 0.6) !important;
        border-color: #64C5B1 !important;
        transform: translateY(-2px);
    }
    .icon-btn svg, .btn-plus svg { width: 18px; height: 18px; transition: stroke 0.3s; stroke: #fff !important; }
    .icon-btn:hover svg, .btn-plus:hover svg { stroke: #fff !important; }

    /* After a click/tap the button keeps :focus; once the pointer leaves, clear
       the teal fill so it doesn't stay "stuck green" (esp. the 4K, which sits
       under the cursor when scrolling). Real hover still fills teal. */
    .btn-4k:focus:not(:hover), .icon-btn:focus:not(:hover), .btn-plus:focus:not(:hover) {
        background-color: transparent !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
        box-shadow: none !important;
        transform: none !important;
    }
    .icon-btn:focus:not(:hover) svg, .btn-plus:focus:not(:hover) svg { stroke: #fff !important; }

    /* Animations */
    @keyframes firePulse {
        0% { filter: drop-shadow(0 0 5px rgba(255,152,0,0.4)); transform: scale(1); }
        100% { filter: drop-shadow(0 0 15px rgba(255,152,0,0.9)); color: #ff9800; transform: scale(1.1); }
    }
    @keyframes radarPulse {
        0% { box-shadow: 0 0 0 0 rgba(79, 209, 197, 0.6); }
        70% { box-shadow: 0 0 0 8px rgba(79, 209, 197, 0); }
        100% { box-shadow: 0 0 0 0 rgba(79, 209, 197, 0); }
    }

    .menu-item-trend .icon-btn:hover {
        background-color: transparent !important;
        color: #ff9800 !important;
        animation: firePulse 0.5s infinite alternate;
        box-shadow: none !important;
        border-color: #ff9800 !important;
    }
    .menu-item-trend .icon-btn:hover svg { stroke: #ff9800 !important; }

    .menu-item-bell .icon-btn {
        animation: radarPulse 2s infinite;
    }
    .menu-item-bell .icon-btn:hover {
        background-color: #64C5B1 !important;
        box-shadow: none !important;
    }

    /* Social Sub-Menu Layout */
    .social-sub-menu {
        border-radius: 16px !important;
        padding: 10px !important;
        min-width: 140px !important;
        text-align: left !important;
    }
    .social-sub-menu li {
        width: 100% !important;
    }
    .social-sub-menu li > a {
        border-radius: 8px !important;
        padding: 10px 15px !important;
        display: flex !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    .social-sub-menu a { display: flex; align-items: center; gap: 10px; font-family: 'Inter', sans-serif; color: #e5e2e1; text-decoration: none; padding: 8px 0; transition: all 0.2s; }
    .social-sub-menu a:hover { color: #64C5B1; transform: translateX(3px); }
}

/* --- MOBILE MENU GLASSMORPHISM & FIXES --- */
@media (max-width: 1024px) {
    /* Prevent the native mobile menu from sliding the body content */
    body, html, .site-container, #page { transform: none !important; left: 0 !important; right: 0 !important; }

    /* Mobile Logo padding safe area */
    .mobile-logo-table-cell { padding-left: 20px !important; }

    /* Mobile Menu Container Glassmorphism - Force override all theme backgrounds */
    #navbar-mobile-container,
    #navbar-mobile-container.lumina-mobile-container,
    #navbar-mobile-container .navbar {
        background: rgba(19, 19, 19, 0.4) !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
    }

    #navbar-mobile-container {
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        position: fixed !important;
        z-index: 999999 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        overflow-y: auto !important;
    }

    /* Make the inner navbar wrapper transparent */
    #navbar-mobile-container .navbar { background: transparent !important; box-shadow: none !important; position: relative !important; width: 100%; min-height: 100vh !important; }
    #navbar-mobile-container .nav-menu-mobile { background: transparent !important; padding-bottom: 80px; }

    #navbar-mobile-container .nav-menu-mobile a,
    #navbar-mobile-container .nav-menu-mobile span {
        color: #ffffff !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 16px !important;
        transition: all 0.3s ease;
    }

    #navbar-mobile-container .nav-menu-mobile > li {
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        margin: 0 !important;
    }
    #navbar-mobile-container .nav-menu-mobile a:hover {
        background: rgba(100,197,177,0.15) !important;
        color: #64C5B1 !important;
        border-radius: 8px !important;
    }

    #mobile-bar { background: transparent !important; position: absolute; width: 100%; z-index: 9999; }
    #mobile-bar.scrolled { position: fixed; background: rgba(19, 19, 19, 0.4) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; }

    /* Hide visually overlapping mobile submenus taking up vertical space */
    #navbar-mobile-container .sub-menu { display: none; }
    #navbar-mobile-container li.active > .sub-menu,
    #navbar-mobile-container li.open > .sub-menu { display: block; }

    /* Hide the redundant extra '+' toggle everywhere in mobile */
    #navbar-mobile-container .toggle-child { display: none !important; }
}

/* Force Logo Spacing (desktop) */
.lumina-hybrid-layout .lumina-wrap { padding: 0 40px !important; width: 100% !important; max-width: 100% !important; }
.lumina-hybrid-layout .logo-container { padding: 0 !important; }
/* Sub-menu top override - per-menu positioning handled individually below */
.lumina-hybrid-layout .lumina-middle-menu ul.sub-menu, .lumina-hybrid-layout .lumina-left-menu ul.sub-menu { top: 70px !important; }
.lumina-hybrid-layout .lumina-right-menu ul.sub-menu { top: 70px !important; transform: none !important; }

/* FIX DESKTOP MENU STRETCHING MOBILE VIEWPORT */
@media (max-width: 1024px) {
  .lumina-hybrid-layout { display: none !important; }
  #navbar-container { display: none !important; }
}

/* MOBILE UI REFINEMENTS: CLOSE ON CLICK, OVERLAY */
@media (max-width: 1024px) {
  #navbar-mobile-container ul.dropdown { background: transparent !important; box-shadow: none !important; border: none !important; }
  body.menu-toggle #mobile-closer-overlay { display: block !important; opacity: 1 !important; z-index: 999998 !important; }
  body.menu-toggle #mobile-closer-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0,0,0,0.5) !important; z-index: 999998 !important; display: block !important; cursor: pointer !important; }
  #navbar-mobile-container { box-shadow: none !important; }
  .menu-toggle.breakpoint #navbar-mobile-container { right: 0 !important; width: 320px !important; max-width: 90vw !important; }
  #navbar-mobile-container { width: 320px !important; max-width: 90vw !important; }
}

.menu-item-social .sub-menu li a img.emoji { display: none !important; }

/* SOCIAL ICON CIRCLES - Branded Social Media Icons (desktop dropdown) */
.social-sub-menu {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    min-width: auto !important;
    padding: 12px 14px !important;
    border-radius: 20px !important;
    background: rgba(19, 19, 19, 0.85) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
.social-sub-menu li {
    width: auto !important;
    flex: 0 0 auto !important;
    border: none !important;
}
.social-icon-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    text-decoration: none !important;
    padding: 6px 4px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}
.social-icon-link:hover {
    background: rgba(255,255,255,0.08) !important;
    transform: translateY(-3px) !important;
    color: #fff !important;
}
.social-icon-circle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.social-icon-link:hover .social-icon-circle {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}
.social-name {
    font-size: 9px !important;
    color: rgba(255,255,255,0.7) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    text-align: center !important;
}
.social-icon-link:hover .social-name {
    color: #fff !important;
}
.menu-item-social .sub-menu { display: flex !important; flex-direction: row !important; gap: 8px !important; padding: 12px 14px !important; min-width: auto !important; background: rgba(19, 19, 19, 0.85) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; border-radius: 20px !important; }
.menu-item-social .sub-menu li { border: none !important; width: auto !important; flex: 0 0 auto !important; }
.menu-item-social .sub-menu li a { background: transparent !important; padding: 6px 4px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; border: none !important; width: auto !important; height: auto !important; border-radius: 10px !important; font-size: unset !important; color: unset !important; gap: 5px !important; }


/* ============================================================
   FINAL OPTIMIZED LUMINA HEADER FIXES
   ============================================================ */

/* 1. SOCIAL MENU DROPDOWN (Positioned correctly on the right) */
@media (min-width: 1025px) {
  .lumina-right-menu .menu-item-social > ul.sub-menu,
  .lumina-right-menu .menu-item-social > ul.social-sub-menu {
    right: 0 !important;
    left: auto !important;
    top: calc(100% + 8px) !important;
    transform: none !important;
    min-width: 170px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .lumina-right-menu .menu-item-social:hover > ul.sub-menu,
  .lumina-right-menu .menu-item-social:hover > ul.social-sub-menu,
  .lumina-hybrid-layout .lumina-right-menu .menu-item-social:hover > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    right: 0 !important;
    left: auto !important;
    top: calc(100% + 8px) !important;
    flex-direction: column !important;
  }
}

/* 2. DESKTOP SCROLL & STICKING GLASSMORPHISM */
#navbar-container.scrolled,
.lumina-hybrid-layout.scrolled,
.site-header.scrolled #navbar-container,
body.sticking #navbar-container,
body.sticking .lumina-hybrid-layout,
.sticking .site-header #navbar-container,
.sticking #navbar-container,
.sticking .lumina-hybrid-layout {
  background: rgba(10, 10, 18, 0.4) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.3s ease !important;
}

#navbar-container.scrolled .lumina-wrap,
.lumina-hybrid-layout.scrolled .lumina-wrap,
body.sticking #navbar-container .lumina-wrap,
body.sticking .lumina-hybrid-layout .lumina-wrap,
.sticking #navbar-container .lumina-wrap {
  background: transparent !important;
}

/* 3. NARROW HEADER HEIGHT (64px) */
#navbar-container,
.lumina-hybrid-layout,
.lumina-hybrid-layout .lumina-wrap,
.sticking #navbar-container {
  height: 64px !important;
  min-height: 64px !important;
}

.lumina-hybrid-layout .lumina-navbar-left,
.lumina-hybrid-layout .lumina-navbar-center,
.lumina-hybrid-layout .lumina-navbar-right {
  height: 64px !important;
}

.lumina-hybrid-layout .lumina-middle-menu ul.sub-menu,
.lumina-hybrid-layout .lumina-left-menu ul.sub-menu {
  top: 64px !important;
}

/* 4. LOGO & CATEGORIES BUTTON POSITIONING & ALIGNMENT
   GOTCHA: the logo-centering reset block below originally used
   `margin: 0 !important`, which silently zeroed the Logo↔Categories gap
   because it comes AFTER this rule in source. The reset now only
   zeros margin-top/bottom so horizontal margins remain editable. */
@media (min-width: 1025px) {
  .lumina-navbar-left > .logo-container {
    margin-right: 30px !important; /* Distance between Logo and Categories */
    margin-left: 0 !important; /* left spacing comes from .lumina-wrap padding */
  }
}

/* Align and reset the logo to allow vertical centering inside the flex layout */
.lumina-hybrid-layout .logo-container,
.lumina-hybrid-layout .logo,
.lumina-hybrid-layout .logo a.logo-link,
.lumina-hybrid-layout .logo a,
.lumina-hybrid-layout .logo-img-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  float: none !important;
}

.lumina-hybrid-layout .logo-img {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  max-height: 74px !important;
  height: 74px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.lumina-hybrid-layout .logo-light { display: block !important; }
.lumina-hybrid-layout .logo-dark  { display: none !important; }

.lumina-left-menu {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.lumina-left-menu > li {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* Categories Button Pill */
.lumina-hybrid-layout .lumina-left-menu > li > a.menu-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 32px !important;
  padding: 0 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 9999px !important;
}

/* Categories Hamburger Icon */
.lumina-hybrid-layout .lumina-left-menu > li > a.menu-link::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 12px !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Categories Text */
.lumina-hybrid-layout .lumina-left-menu > li > a.menu-link span.menu-item-inner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
}

.lumina-hybrid-layout .lumina-left-menu > li > a.menu-link .menu-item-text-container {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* 5. RESTORED DROPDOWN FIXES (Glassmorphism, Size, Left Alignment) */

/* Social Dropdown Glassmorphism */
.lumina-hybrid-layout .lumina-right-menu ul.sub-menu,
.lumina-hybrid-layout .lumina-right-menu ul.social-sub-menu {
    background: rgba(10, 10, 18, 0.4) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
    padding: 10px !important;
}

/* Left and Middle Menu Dropdowns Glassmorphism */
.lumina-hybrid-layout .lumina-left-menu ul.sub-menu,
.lumina-hybrid-layout .lumina-middle-menu ul.sub-menu {
    background: rgba(10, 10, 18, 0.4) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
    padding: 10px !important;
    text-align: left !important;
}

/* Submenu Links Size and Alignment */
.lumina-hybrid-layout .lumina-left-menu ul.sub-menu li,
.lumina-hybrid-layout .lumina-middle-menu ul.sub-menu li {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

.lumina-hybrid-layout .lumina-left-menu ul.sub-menu a.menu-link,
.lumina-hybrid-layout .lumina-middle-menu ul.sub-menu a.menu-link {
    font-size: 13px !important;
    padding: 6px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}


/* ============================================================
   6. CLEANUP FIXES
   ============================================================ */

/* The theme injects an empty <li class="cart-menu-item"></li> into every
   menu. Left in the flex row it adds a stray gap. Hide them everywhere. */
.lumina-menu li.cart-menu-item:empty,
.nav-menu-mobile li.cart-menu-item:empty {
    display: none !important;
}

/* Logo optical centering: the logo PNG sits ~2px low; nudge it up so its
   glyph center aligns with the Categories pill center. */
@media (min-width: 1025px) {
  .lumina-hybrid-layout .lumina-navbar-left .logo-img {
    transform: translateY(-2px) !important;
  }
}

/* ============================================================
   7. COMPACT SOCIAL DROPDOWN (the "+" Follow-Us panel, DESKTOP)
   Smaller icons, no text labels, and a proportionally narrower panel.
   ============================================================ */
@media (min-width: 1025px) {
  .lumina-right-menu .social-name { display: none !important; }

  .lumina-right-menu .social-icon-circle {
    width: 30px !important;
    height: 30px !important;
  }
  .lumina-right-menu .social-icon-circle svg {
    width: 20px !important;   /* fill ~67% of the 30px circle (was 14px) */
    height: 20px !important;
  }

  .lumina-right-menu .menu-item-social .social-icon-link {
    padding: 4px !important;
    gap: 0 !important;
  }

  .lumina-hybrid-layout .lumina-right-menu .menu-item-social > ul.social-sub-menu {
    min-width: 0 !important;
    width: auto !important;
    padding: 7px !important;
    gap: 5px !important;
  }
}

/* ============================================================
   8. MOBILE DRAWER REDESIGN (authoritative)
   - Compact, left-aligned categories near the top
   - Bottom: row 1 = 4K / Desktop / Trend / Bell (identical to desktop circles)
   - Row 2 = the 5 social logos, same size, fit horizontally
   - "+" social parent and Share are hidden on mobile
   - Drawer panel: a touch more transparent frosted glass
   ============================================================ */
@media (max-width: 1024px) {

  /* Drawer panel: more transparent frosted glass */
  html body #navbar-mobile-container,
  html body #navbar-mobile-container.lumina-mobile-container {
    background: rgba(16, 16, 22, 0.20) !important;
    backdrop-filter: blur(26px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
  }
  html body #navbar-mobile-container .navbar {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    min-height: 100vh !important;
    box-shadow: none !important;
  }

  /* Menu list: top-aligned & compact (override theme's flex column min-height) */
  html body #navbar-mobile-container #site-navigation-primary-mobile {
    display: block !important;
    min-height: 0 !important;
    padding-top: 5px !important;      /* categories sit closer to the top */
    padding-bottom: 170px !important;
    padding-left: 1px !important;     /* 1px breathing gap on the sides */
    padding-right: 1px !important;
  }
  html body #navbar-mobile-container .menu-main-menu-left-part-container,
  html body #navbar-mobile-container .menu-main-menu-standard-container { width: 100% !important; }

  /* Category / page items: LEFT-aligned, compact, close together */
  html body #navbar-mobile-container .nav-menu-mobile > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  html body #navbar-mobile-container .nav-menu-mobile > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    padding: 12px 22px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    height: auto !important;
    text-transform: none !important;
  }
  html body #navbar-mobile-container .nav-menu-mobile > li > a > span,
  html body #navbar-mobile-container .nav-menu-mobile > li > a .menu-item-inner,
  html body #navbar-mobile-container .nav-menu-mobile > li > a .menu-item-text-container {
    text-align: left !important;
    justify-content: flex-start !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
  }
  html body #navbar-mobile-container .nav-menu-mobile li.menu-item-has-children > a::after {
    content: '+' !important;
    font-weight: 300 !important;
    font-size: 22px !important;
    margin-left: auto !important;
    line-height: 1 !important;
    opacity: 0.8;
  }

  /* ---------- BOTTOM ICON ROWS ---------- */
  /* Hide the "+" (social parent) button and Share + empty cart items on mobile */
  html body #navbar-mobile-container .injected-mobile-icons .menu-item-social > a.btn-plus,
  html body #navbar-mobile-container .injected-mobile-icons .menu-item-share,
  html body #navbar-mobile-container .injected-mobile-icons .cart-menu-item { display: none !important; }

  /* Container pinned near the bottom */
  html body #navbar-mobile-container .injected-mobile-icons {
    position: absolute !important;
    bottom: 22px !important;
    left: 0 !important;
    width: 100% !important;
  }
  html body #navbar-mobile-container .injected-mobile-icons ul.nav-menu-mobile {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    row-gap: 16px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    background: transparent !important;
  }
  html body #navbar-mobile-container .injected-mobile-icons ul.nav-menu-mobile > li {
    border-bottom: none !important;
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  /* Row 1 order: 4K, Desktop, Trend, Bell */
  html body #navbar-mobile-container .injected-mobile-icons .menu-item-4k      { order: 1 !important; }
  html body #navbar-mobile-container .injected-mobile-icons .menu-item-desktop { order: 2 !important; }
  html body #navbar-mobile-container .injected-mobile-icons .menu-item-trend   { order: 3 !important; }
  html body #navbar-mobile-container .injected-mobile-icons .menu-item-bell    { order: 4 !important; }
  /* Social parent = full-width row 2 (only its sub-menu shows, the parent <a> is hidden above) */
  html body #navbar-mobile-container .injected-mobile-icons .menu-item-social  { order: 5 !important; width: 100% !important; flex: 0 0 100% !important; }

  /* Main icon buttons — identical to the desktop circles */
  html body #navbar-mobile-container .injected-mobile-icons .icon-btn {
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    width: 40px !important; height: 40px !important;
    min-width: 40px !important; min-height: 40px !important;
    max-width: 40px !important; max-height: 40px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    padding: 0 !important; margin: 0 !important;
    transition: all 0.3s ease !important;
  }
  html body #navbar-mobile-container .injected-mobile-icons .icon-btn svg { width: 19px !important; height: 19px !important; stroke: #fff !important; }
  html body #navbar-mobile-container .injected-mobile-icons .icon-4k-text { font-size: 13px !important; font-weight: 700 !important; font-family: 'Inter', sans-serif !important; color: #fff !important; line-height: 1 !important; }
  html body #navbar-mobile-container .injected-mobile-icons .icon-btn:hover,
  html body #navbar-mobile-container .injected-mobile-icons .icon-btn:active {
    background-color: #64C5B1 !important; border-color: #64C5B1 !important; color: #fff !important;
  }

  /* Row 2 — the 5 social logos: always visible, same size, fit horizontally */
  html body #navbar-mobile-container .injected-mobile-icons .menu-item-social .social-sub-menu,
  html body #navbar-mobile-container .injected-mobile-icons .menu-item-social ul.sub-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border: none !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important;
    width: 100% !important; min-width: 0 !important;
  }
  html body #navbar-mobile-container .injected-mobile-icons .social-sub-menu > li {
    width: auto !important; flex: 0 0 auto !important; border: none !important; margin: 0 !important;
  }
  html body #navbar-mobile-container .injected-mobile-icons .social-icon-link {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    padding: 0 !important; background: transparent !important; gap: 0 !important;
    transform: none !important;
  }
  html body #navbar-mobile-container .injected-mobile-icons .social-name { display: none !important; }
  html body #navbar-mobile-container .injected-mobile-icons .social-icon-circle {
    width: 40px !important; height: 40px !important;
    min-width: 40px !important; min-height: 40px !important;
    border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  html body #navbar-mobile-container .injected-mobile-icons .social-icon-circle svg { width: 27px !important; height: 27px !important; /* fill ~67% of the 40px circle (was 19px) */ }
}

/* ============================================================
   8b. MOBILE MENU REFINEMENTS (2026-06-03)
   - remove stray theme icon (2nd "+"), keep our ::after indicator
   - close the gap between the Categories list and the rest
   - categories closer to the left (symmetric)
   - smaller submenu text, left-aligned, slightly indented
   - submenus scroll inside themselves when too tall
   ============================================================ */
@media (max-width: 1024px) {

  /* Drop the per-<ul> bottom padding that opened a big gap between the
     Categories list and the Albums/Blog list. */
  html body #navbar-mobile-container .nav-menu-mobile { padding-bottom: 0 !important; }
  html body #navbar-mobile-container .menu-main-menu-left-part-container,
  html body #navbar-mobile-container .menu-main-menu-standard-container { margin: 0 !important; padding: 0 !important; }

  /* Hide the theme's FontAwesome icon set on menu items (the extra "+"),
     plus any toggle element. Our own ::after stays as the single dropdown mark. */
  html body #navbar-mobile-container .nav-menu-mobile li .fa,
  html body #navbar-mobile-container .nav-menu-mobile li i[class*="fa-"],
  html body #navbar-mobile-container .nav-menu-mobile .toggle-child { display: none !important; }

  /* Top-level items: closer to the left, symmetric L/R padding */
  html body #navbar-mobile-container .nav-menu-mobile > li > a { padding: 12px 16px !important; }

  /* --- Submenu items (the category sub-links). Exclude .social-sub-menu,
         which is also a .sub-menu but is the bottom social-icon row. --- */
  html body #navbar-mobile-container .nav-menu-mobile .sub-menu:not(.social-sub-menu) > li { border-bottom: none !important; margin: 0 !important; }
  html body #navbar-mobile-container .nav-menu-mobile .sub-menu:not(.social-sub-menu) > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 8px 16px 8px 30px !important;   /* slightly indented under the parent */
    font-size: 13px !important;              /* smaller than the 16px top-level */
  }
  html body #navbar-mobile-container .nav-menu-mobile .sub-menu:not(.social-sub-menu) > li > a span {
    font-size: 13px !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }

  /* Submenu scrolls inside itself when it has too many items to fit
     (again, not the social row) */
  html body #navbar-mobile-container .nav-menu-mobile li.menu-item-has-children:not(.menu-item-social) > ul.sub-menu:not(.social-sub-menu),
  html body #navbar-mobile-container .nav-menu-mobile ul.sub-menu.menu-item-open:not(.social-sub-menu),
  html body #navbar-mobile-container .nav-menu-mobile li.open > ul.sub-menu:not(.social-sub-menu),
  html body #navbar-mobile-container .nav-menu-mobile li.active > ul.sub-menu:not(.social-sub-menu) {
    max-height: 45vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ============================================================
   8c. MOBILE: kill the theme's own "+" + pull text to the left
   ============================================================ */
@media (max-width: 1024px) {

  /* The theme adds its OWN plus via a Dashicons pseudo-element
     (main.css: content:"\f347"; position:absolute; top:0; right:0) on every
     expandable mobile item. That's the duplicate "+" sitting at the top-right.
     Remove it; our centered ::after stays as the single dropdown mark. */
  html body #navbar-mobile-container .nav-menu-mobile li.menu-item-has-children:before,
  html body #navbar-mobile-container .nav-menu-mobile li.page_item_has_children:before,
  html body #navbar-mobile-container .nav-menu-mobile li.active:before {
    content: none !important;
    display: none !important;
  }

  /* Pull the text container hard to the left — leave just ~1px gap.
     (Reset the default <ul> indent and our previous 16px left padding.) */
  html body #navbar-mobile-container #site-navigation-primary-mobile { padding-left: 1px !important; padding-right: 1px !important; }
  html body #navbar-mobile-container .nav-menu-mobile { padding-left: 0 !important; margin-left: 0 !important; list-style: none !important; }
  html body #navbar-mobile-container .menu-main-menu-left-part-container,
  html body #navbar-mobile-container .menu-main-menu-standard-container { padding-left: 0 !important; margin-left: 0 !important; }
  html body #navbar-mobile-container .nav-menu-mobile > li { padding-left: 0 !important; margin-left: 0 !important; }
  html body #navbar-mobile-container .nav-menu-mobile > li > a {
    padding-left: 1px !important;
    padding-right: 14px !important;   /* room for our ::after "+" on the right */
  }
  html body #navbar-mobile-container .nav-menu-mobile > li > a > span,
  html body #navbar-mobile-container .nav-menu-mobile > li > a .menu-item-inner {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  /* submenu items keep a small indent under their parent */
  html body #navbar-mobile-container .nav-menu-mobile .sub-menu:not(.social-sub-menu) > li > a {
    padding-left: 16px !important;
  }
}

/* ============================================================
   8d. MOBILE: zero every left offset in the drawer's ancestor
   chain so the category text sits ~1px from the left edge.
   (The offset turned out to be padding on #navbar-mobile/.navbar,
   not on the <ul>/<li>, so reset the whole chain.)
   ============================================================ */
@media (max-width: 1024px) {
  html body #navbar-mobile-container #navbar-mobile,
  html body #navbar-mobile-container .navbar,
  html body #navbar-mobile-container #site-navigation-primary-mobile,
  html body #navbar-mobile-container #site-navigation-primary-mobile > div,
  html body #navbar-mobile-container .menu-main-menu-left-part-container,
  html body #navbar-mobile-container .menu-main-menu-standard-container,
  html body #navbar-mobile-container #site-navigation-primary-mobile .nav-menu-mobile,
  html body #navbar-mobile-container #site-navigation-primary-mobile .nav-menu-mobile > li {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  /* keep the icon row centered (it lives in .injected-mobile-icons, padded by section 8) */
  html body #navbar-mobile-container #site-navigation-primary-mobile .nav-menu-mobile > li > a {
    padding-left: 1px !important;
  }
  html body #navbar-mobile-container #site-navigation-primary-mobile .nav-menu-mobile .sub-menu:not(.social-sub-menu) > li > a {
    padding-left: 14px !important;
  }
}

/* ============================================================
   8e. MOBILE: force the menu containers to full width / no float /
   left-aligned. The .menu-*-container divs were narrower than the
   nav (inline-block/float/width from the theme), which pushed the
   text to the right regardless of padding resets.
   ============================================================ */
@media (max-width: 1024px) {
  html body #navbar-mobile-container #site-navigation-primary-mobile {
    text-align: left !important;
    display: block !important;
  }
  html body #navbar-mobile-container #site-navigation-primary-mobile > div,
  html body #navbar-mobile-container .menu-main-menu-left-part-container,
  html body #navbar-mobile-container .menu-main-menu-standard-container,
  html body #navbar-mobile-container .injected-mobile-icons {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  html body #navbar-mobile-container #site-navigation-primary-mobile .nav-menu-mobile {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    text-align: left !important;
  }
}

/* ============================================================
   8f. MOBILE: the REAL left offset — the drawer itself
   (#navbar-mobile-container) has `padding: 30px` in the theme
   (main.css line 6501). Pull its left padding to 1px so the text
   container sits ~1px from the edge. Keep a little top/right room.
   ============================================================ */
@media (max-width: 1024px) {
  html body #navbar-mobile-container {
    padding-left: 5px !important;   /* equal ~5px breathing gap on both sides */
    padding-right: 5px !important;
    padding-top: 8px !important;
  }
  html body #navbar-mobile-container #site-navigation-primary-mobile .nav-menu-mobile > li > a {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================================
   8g. MOBILE: match the site body font (Hammersmith One),
   make the TOP-LEVEL items a touch smaller + a touch bolder,
   and keep the submenu items at normal weight (only the top
   menu is bold — more aesthetic).
   ============================================================ */
@media (max-width: 1024px) {
  /* All menu text uses the site's body font */
  html body #navbar-mobile-container .nav-menu-mobile a,
  html body #navbar-mobile-container .nav-menu-mobile span {
    font-family: 'Hammersmith One', sans-serif !important;
  }

  /* Top-level category items (only inside the category containers, NOT the
     bottom icon row): smaller + bolder. Hammersmith One ships single-weight,
     so 700 renders as a slightly heavier (synthesized) bold. */
  html body #navbar-mobile-container .menu-main-menu-left-part-container .nav-menu-mobile > li > a,
  html body #navbar-mobile-container .menu-main-menu-left-part-container .nav-menu-mobile > li > a span,
  html body #navbar-mobile-container .menu-main-menu-standard-container .nav-menu-mobile > li > a,
  html body #navbar-mobile-container .menu-main-menu-standard-container .nav-menu-mobile > li > a span {
    font-size: 14px !important;     /* a touch smaller than the old 16px */
    font-weight: 700 !important;    /* a touch bolder */
  }

  /* Submenu (category sub-links): keep NORMAL weight, slightly smaller.
     Do not bolden these. */
  html body #navbar-mobile-container .nav-menu-mobile .sub-menu:not(.social-sub-menu) > li > a,
  html body #navbar-mobile-container .nav-menu-mobile .sub-menu:not(.social-sub-menu) > li > a span {
    font-weight: 400 !important;
    font-size: 13px !important;
  }
}

/* ============================================================
   8h. MOBILE: match the reference screenshot's typography & rhythm
   - UPPERCASE + letter-spacing (like the site's native menu)
   - roomier symmetric side padding
   - airier vertical spacing
   (font stays Hammersmith One; top-level bold, submenu normal — set in 8g)
   ============================================================ */
@media (max-width: 1024px) {
  /* roomier symmetric side gap, matching the reference proportions */
  html body #navbar-mobile-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* top-level: uppercase, spaced, airier rows */
  html body #navbar-mobile-container .menu-main-menu-left-part-container .nav-menu-mobile > li > a,
  html body #navbar-mobile-container .menu-main-menu-standard-container .nav-menu-mobile > li > a {
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }
  html body #navbar-mobile-container .menu-main-menu-left-part-container .nav-menu-mobile > li > a span,
  html body #navbar-mobile-container .menu-main-menu-standard-container .nav-menu-mobile > li > a span {
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
  }

  /* submenu: uppercase + spacing as well, but NOT bold (kept normal in 8g) */
  html body #navbar-mobile-container .nav-menu-mobile .sub-menu:not(.social-sub-menu) > li > a,
  html body #navbar-mobile-container .nav-menu-mobile .sub-menu:not(.social-sub-menu) > li > a span {
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
  }
}

/* ============================================================
   8i. MOBILE: a visible CLOSE button while the drawer is open.
   The theme hides #toggle when the menu is open (main.css ~16887),
   so the only way to close was tapping the dimmed overlay. We bring
   the hamburger back as a fixed top-left button ABOVE the drawer.
   It still carries .mobile-menu-toggle-button, so a tap closes it.
   ============================================================ */
@media (max-width: 1024px) {
  /* hide the top-bar logo while the drawer is open so the close button can sit top-left without overlap */
  body.menu-toggle #mobile-bar .logo-container,
  body.menu-toggle #mobile-bar .logo { display: none !important; }

  body.menu-toggle #toggle,
  body.menu-toggle.breakpoint #mobile-bar #toggle {
    display: block !important;
    position: fixed !important;
    top: 14px !important;
    left: 16px !important;
    right: auto !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 100000000 !important;   /* above the drawer (999999) and the overlay */
    background: transparent !important;
    cursor: pointer !important;
  }
  /* clean white 3-line hamburger (override the theme's Dashicons glyph) */
  body.menu-toggle #toggle:before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 26px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cg stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='1.5' y1='2' x2='24.5' y2='2'/%3E%3Cline x1='1.5' y1='10' x2='24.5' y2='10'/%3E%3Cline x1='1.5' y1='18' x2='24.5' y2='18'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
}