/* ==========================================================
   OXYYRA — Glass Header + Full-Width Mega Dropdowns (Remade)
   - Cleaner variables + consistent sizing
   - Better icon contrast on glass backgrounds
   - Mega menu supports BOTH hover and JS (.ox-open)
   - Mobile burger always visible on mobile breakpoint
   - Fullscreen mobile drawer w/ smooth animation
   - WP admin bar safe + body offset safe
   ========================================================== */

/* ---------- Tokens ---------- */
:root{
  --ox-header-h: 72px;

  --ox-max: 1280px;
  --ox-pad-x: 18px;

  --ox-glass: rgba(0,0,0,.38);
  --ox-glass-2: rgba(12,12,14,.88);
  --ox-stroke: rgba(255,255,255,.10);
  --ox-stroke-2: rgba(255,255,255,.14);

  --ox-text: rgba(255,255,255,.92);
  --ox-muted: rgba(255,255,255,.62);
  --ox-faint: rgba(255,255,255,.45);

  --ox-accent: #57ff8f;
  --ox-accent-2: #2fe071;

  --ox-r-pill: 999px;
  --ox-r-lg: 22px;
  --ox-r-md: 18px;
  --ox-r-sm: 14px;

  --ox-shadow-1: 0 12px 40px rgba(0,0,0,.40);
  --ox-shadow-2: 0 30px 110px rgba(0,0,0,.68);

  --ox-blur: blur(14px);
  --ox-blur-strong: blur(18px);
  
  :root{ --ox-topbar-h: 38px; } /* keep your token */

  --ox-ease: cubic-bezier(.2,.8,.2,1);
}

/* ---------- WP admin bar + body offset ---------- */
.ox-headerWrap{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;
}

.admin-bar .ox-headerWrap{
  top: var(--wp-admin--admin-bar--height, 32px);
}

body{
  padding-top: calc(var(--ox-header-h) + var(--ox-topbar-h));
}

.admin-bar body{
  padding-top: calc(var(--ox-header-h) + var(--ox-topbar-h) + var(--wp-admin--admin-bar--height, 32px));
}

/* When there's NO header on the page, kill the padding */
body.ox-no-header{
  padding-top: 0 !important;
}


/* ---------- Header Shell ---------- */
.ox-headerWrap{
  background: var(--ox-glass);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: var(--ox-blur);
  -webkit-backdrop-filter: var(--ox-blur);
}

.ox-header{
  max-width: var(--ox-max);
  margin: 0 auto;
  padding: 14px var(--ox-pad-x);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ---------- Brand ---------- */
.ox-brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex: 0 0 auto;
}
.ox-brandLogo{
  height: 28px;
  width: auto;
  display:block;
}

/* ---------- Desktop Nav ---------- */
.ox-nav{ flex: 1; min-width: 0; }
.ox-navList{
  display:flex;
  align-items:center;
  gap: 10px;
  list-style:none;
  margin:0;
  padding:0;
}

.ox-item{ position: relative; }

/* Full-width mega: make LI static so dropdown can be 100% width */
.ox-item.ox-hasDrop{ position: static; }

.ox-link{
  display:inline-flex;
  align-items:center;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--ox-r-pill);
  text-decoration:none;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .01em;
  color: rgba(255,255,255,.88);
  transition: background .18s var(--ox-ease), color .18s var(--ox-ease), transform .18s var(--ox-ease);
  outline: none;
}
.ox-link:hover{
  background: rgba(255,255,255,.07);
  color: #fff;
  transform: translateY(-1px);
}
.ox-link:focus-visible{
  box-shadow: 0 0 0 3px rgba(87,255,143,.22);
  background: rgba(255,255,255,.06);
  color: #fff;
}

/* ---------- Right Actions ---------- */
.ox-actions{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-left: auto;
  position: relative;
  z-index: 10002; /* keep above mega panels */
}

.ox-profileBtn{
  width: 42px;
  height: 42px;
  border-radius: var(--ox-r-pill);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  transition: background .18s var(--ox-ease), transform .18s var(--ox-ease), border-color .18s var(--ox-ease);
}
.ox-profileBtn:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}
.ox-profileBtn svg{ width: 20px; height: 20px; }

.ox-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--ox-r-pill);
  font-weight: 900;
  font-size: 14px;
  text-decoration:none;
  color:#0b0b0c;
  background: linear-gradient(180deg, var(--ox-accent), var(--ox-accent-2));
  box-shadow: 0 14px 34px rgba(87,255,143,.16), inset 0 0 0 1px rgba(0,0,0,.18);
  transition: transform .18s var(--ox-ease), filter .18s var(--ox-ease), box-shadow .18s var(--ox-ease);
}
.ox-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 18px 44px rgba(87,255,143,.20), inset 0 0 0 1px rgba(0,0,0,.18);
}

/* ---------- Mega Dropdown ---------- */
.ox-drop{
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 100%;
  border-radius: var(--ox-r-lg);
  background: var(--ox-glass-2);
  border: 1px solid var(--ox-stroke);
  box-shadow: var(--ox-shadow-2);
  backdrop-filter: var(--ox-blur-strong);
  -webkit-backdrop-filter: var(--ox-blur-strong);

  display: none;
  overflow: hidden;
  transform-origin: top center;
  animation: oxPop .14s var(--ox-ease) both;
}

/* show on hover/focus, AND show when JS adds .ox-open */
.ox-hasDrop:hover > .ox-drop,
.ox-hasDrop:focus-within > .ox-drop,
.ox-hasDrop.ox-open > .ox-drop{
  display:block;
}

/* subtle appear */
@keyframes oxPop{
  from{ opacity: 0; transform: translateY(-6px) scale(.99); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

.ox-megaInner{
  max-width: var(--ox-max);
  margin: 0 auto;
  padding: 14px;
}

.ox-megaTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 10px 14px;
}

.ox-dropHead{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ox-faint);
}

.ox-megaSub{
  margin-top: 6px;
  font-size: 13px;
  color: var(--ox-muted);
}

.ox-megaAll{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--ox-r-pill);
  font-weight: 900;
  font-size: 13px;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: background .18s var(--ox-ease), border-color .18s var(--ox-ease), transform .18s var(--ox-ease);
}
.ox-megaAll:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}

.ox-megaGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 10px 12px;
}

/* items */
.ox-dropItem{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px 12px;
  border-radius: var(--ox-r-md);
  text-decoration:none;

  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);

  transition: background .18s var(--ox-ease), transform .18s var(--ox-ease), border-color .18s var(--ox-ease);
}
.ox-dropItem:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}

.ox-dropTitle{
  display:block;
  font-weight: 900;
  font-size: 14px;
  color: rgba(255,255,255,.95);
}
.ox-dropDesc{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

/* icon pill: stronger contrast + predictable icon visibility */
.ox-ico{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;

  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.22),
    0 12px 30px rgba(0,0,0,.40);

  color: rgba(255,255,255,.98);
}
.ox-ico svg{
  width: 22px;
  height: 22px;
  stroke: currentColor;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); /* keeps visible on bright gradients */
}

/* colorways */
.ox-ico-blue{
  background: radial-gradient(120% 120% at 30% 20%, rgba(96,165,250,.56), rgba(96,165,250,.12));
}
.ox-ico-green{
  background: radial-gradient(120% 120% at 30% 20%, rgba(87,255,143,.52), rgba(87,255,143,.10));
  color: #ecfff3;
}
.ox-ico-purple{
  background: radial-gradient(120% 120% at 30% 20%, rgba(167,139,250,.54), rgba(167,139,250,.12));
}
.ox-ico-slate{
  background: radial-gradient(120% 120% at 30% 20%, rgba(148,163,184,.32), rgba(148,163,184,.08));
}

/* promo strip */
.ox-megaPromo{
  margin: 10px 10px 6px;
  padding: 14px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.ox-pill{
  display:inline-flex;
  align-items:center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--ox-r-pill);
  font-size: 11px;
  font-weight: 900;
  letter-spacing:.08em;
  text-transform: uppercase;
  background: rgba(87,255,143,.14);
  border: 1px solid rgba(87,255,143,.22);
  color:#bfffd5;
}
.ox-megaPromoTitle{ color:#fff; font-weight:900; margin-top:6px; }
.ox-megaPromoDesc{ color: rgba(255,255,255,.62); font-size: 13px; margin-top:2px; }
.ox-megaPromoBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--ox-r-pill);
  font-weight: 900;
  text-decoration:none;
  background: linear-gradient(180deg, var(--ox-accent), var(--ox-accent-2));
  color:#111;
  box-shadow: 0 14px 34px rgba(87,255,143,.16);
}

/* ---------- Mobile Burger ---------- */
.ox-burger{
  display:none; /* desktop */
  width: 44px;
  height: 44px;
  border-radius: var(--ox-r-sm);
  border: 1px solid var(--ox-stroke-2);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px;
  cursor: pointer;
  position: relative;
  z-index: 10003; /* above header */
}

.ox-burger span{
  display:block;
  width:100%;
  height:2px;
  margin:6px 0;
  background: rgba(255,255,255,.96);
  border-radius: 999px;
}

html.ox-noScroll,
body.ox-noScroll{
  overflow: hidden;
  height: 100%;
}

/* ---------- Mobile Fullscreen Drawer ---------- */
.ox-mobile{
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(2,1,8,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .24s var(--ox-ease), transform .24s var(--ox-ease);
}

.ox-mobileInner{
  height: 100vh;
  max-width: 720px;
  margin: 0 auto;
  padding: 92px 18px 22px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.ox-mobileOpen .ox-mobile{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Mobile-only: when drawer is open, use solid #1c1c1c background */
@media (max-width: 1023px){
  .ox-mobile{
    background: #1c1c1c !important;
  }
}

.ox-mLink, .ox-mCTA{
  height: 54px;
  border-radius: 18px;
  padding: 0 16px;
  font-weight: 900;
  display:flex;
  align-items:center;
  justify-content: space-between;
  text-decoration:none;
}

.ox-mLink{
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  transition: background .18s var(--ox-ease), border-color .18s var(--ox-ease), transform .18s var(--ox-ease);
}
.ox-mLink:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}

.ox-mCTA{
  color:#0b0b0c;
  background: linear-gradient(180deg, var(--ox-accent), var(--ox-accent-2));
  box-shadow: 0 18px 44px rgba(87,255,143,.16);
}

.ox-mobileDivider{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 6px 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px){
  .ox-nav{ display:none !important; }
  .ox-cta{ display:none !important; }  /* optional: keep mobile CTA inside drawer */
  .ox-burger{ display:inline-flex !important; }
}

/* tighter mega grid on smaller desktop/tablet */
@media (max-width: 1200px){
  .ox-megaGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .ox-megaGrid{ grid-template-columns: 1fr; }
}

/* =========================
   HARD FORCE: burger icon always visible
   ========================= */
@media (max-width: 1023px){
  .ox-actions{
    margin-left: auto !important;
    position: relative !important;
    z-index: 10050 !important;
  }

  .ox-burger{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.06) !important;
    cursor: pointer !important;

    /* kill any inherited weirdness */
    color: transparent !important;
    line-height: 0 !important;
    font-size: 0 !important;

    position: relative !important;
    z-index: 10060 !important;
  }

  /* Force the 3 lines */
  .ox-burger > span{
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    margin: 6px 0 !important;
    background: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-radius: 999px !important;
    transform: none !important;
  }
}

/* ✅ Fix: mobile drawer must sit ABOVE the fixed header */
@media (max-width: 1023px){
  .ox-headerWrap.ox-mobileOpen .ox-mobile{
    z-index: 10050 !important;      /* higher than headerWrap (9999) */
    background: #000 !important;    /* fully black */
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* optional: if any part of header still shows, force it black too */
  .ox-headerWrap.ox-mobileOpen{
    background: #000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }
}



/* Mobile accordion toggles */
.ox-mToggle{
  height: 54px;
  border-radius: 18px;
  padding: 0 16px;
  font-weight: 900;
  display:flex;
  align-items:center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;

  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.ox-mChevron{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85);
  transform: rotate(45deg);
  transition: transform .18s var(--ox-ease);
}

.ox-mToggle[aria-expanded="true"] .ox-mChevron{
  transform: rotate(-135deg);
}

/* Submenu wrapper */
.ox-mSub{
  display: grid;
  gap: 10px;
  padding: 8px 0 6px;
}

/* Submenu item (icon + text) */
.ox-mSubItem{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px 14px;
  border-radius: 18px;
  text-decoration:none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.ox-mSubText{ display:block; min-width:0; }
.ox-mSubTitle{
  display:block;
  font-weight: 900;
  color: rgba(255,255,255,.95);
  line-height: 1.2;
}
.ox-mSubDesc{
  display:block;
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
  line-height: 1.3;
}

/* mini CTA inside submenu */
.ox-mSubCTA{
  height: 48px;
  border-radius: 18px;
  padding: 0 16px;
  font-weight: 900;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;

  color: #0b0b0c;
  background: linear-gradient(180deg, var(--ox-accent), var(--ox-accent-2));
  box-shadow: 0 18px 44px rgba(87,255,143,.14);
}

/* ✅ Allow scrolling INSIDE the mobile drawer */
.ox-mobile{
  overflow: auto;                 /* overlay can scroll */
  -webkit-overflow-scrolling: touch;
}

.ox-mobileInner{
  min-height: 100%;
  height: auto;                   /* don't force 100vh here */
  overflow: visible;
}


/* Mobile close button */
.ox-mClose{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10080;

  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;

  display: none;                 /* only show when menu open */
  align-items: center;
  justify-content: center;

  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}

/* show X only when drawer open */
.ox-mobileOpen .ox-mClose{
  display: inline-flex;
}

/* keep it below admin bar if logged in */
.admin-bar .ox-mClose{
  top: calc(18px + var(--wp-admin--admin-bar--height, 32px));
}


/* ==========================================================
   TOP PROMO BAR — clickable slides, centered text, no green CTA
   - Full-bleed background (breaks out of WP constrained)
   - Content centered (text-align center + justify center)
   - "Support / Coupon / Limited Drop" are the ONLY pills (no green button)
   - On mobile: pills hidden, message stays 1 line
   - Whole banner is clickable (each slide has its own link)
   - Font weight reduced
   ========================================================== */

/* height token */
:root{ --ox-topbar-h: 38px; }

/* IMPORTANT: keep your existing body padding-top for header,
   but replace it with this so topbar is included */
body{ padding-top: calc(var(--ox-header-h) + var(--ox-topbar-h)); }
.admin-bar body{
  padding-top: calc(var(--ox-header-h) + var(--ox-topbar-h) + var(--wp-admin--admin-bar--height, 32px));
}

/* Break out of WP constrained container (full-bleed background) */
.ox-headerWrap .ox-topbar{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Container */
.ox-topbarInner{
  height: var(--ox-topbar-h);
  position: relative;
  overflow: hidden;
}

/* ===== Slides (now anchors, fully clickable) ===== */
.ox-topbarSlide{
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;

  animation: oxTopbarCycle 15s infinite;
  animation-delay: calc(var(--i) * 5s);

  text-decoration: none; /* because now it's <a> */
}
.ox-topbarSlide:first-child{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ox-topbarSlide:hover{ filter: brightness(1.02); }

@keyframes oxTopbarCycle{
  0%   { opacity: 0; transform: translateY(-6px); }
  3%   { opacity: 1; transform: translateY(0); }
  20%  { opacity: 1; transform: translateY(0); pointer-events: auto; }
  28%  { opacity: 0; transform: translateY(-6px); pointer-events: none; }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* Constrained content (inside full width bg) */
.ox-topbarContent{
  width: 100%;
  max-width: var(--ox-max);
  margin: 0 auto;
  padding: 0 var(--ox-pad-x);
  position: relative;
  z-index: 2;
}

/* Row (centered) */
.ox-topbarText{
  height: var(--ox-topbar-h);
  display: flex;
  align-items: center;
  justify-content: center; /* center content */
  gap: 10px;

  text-align: center;
  white-space: nowrap;
  overflow: hidden;

  color: rgba(255,255,255,.95);
  font-weight: 600;  /* <-- reduced weight */
  font-size: 13px;
  letter-spacing: .01em;
}

/* Message stays one line and truncates */
.ox-topbarMsg{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;           /* don't force it to take full row */
  color: rgba(255,255,255,.92);
}

/* Only “pill” labels (Support/Coupon/etc) */
.ox-topbarBadge{
  height: 22px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 800; /* reduced from 900 */
  letter-spacing: .08em;
  text-transform: uppercase;

  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  flex: 0 0 auto;
}

/* Optional: second pill style (if you use multiple pills) */
.ox-topbarBadge--alt{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* X close button */
.ox-topbarClose{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  z-index: 10;
}
.ox-topbarClose span{
  font-size: 20px;
  line-height: 1;
  position: relative;
  top: -1px;
}

/* Mobile: hide pills, keep 1-line message centered */
@media (max-width: 640px){
  :root{ --ox-topbar-h: 34px; }

  .ox-topbarContent{
    padding-right: calc(var(--ox-pad-x) + 34px); /* room for X */
  }

  .ox-topbarText{
    font-size: 12px;
    gap: 8px;
  }

  .ox-topbarBadge{
    display: none !important; /* hide Support/Coupon/etc on mobile */
  }

  .ox-topbarMsg{
    flex: 1 1 auto; /* allow more space for message since pills hidden */
  }
}

/* Themes: CSS artwork backgrounds */
.ox-topbarSlide.theme-lunar{
  background:
    radial-gradient(1200px 140px at 18% 50%, rgba(255,215,110,.45), rgba(0,0,0,0) 55%),
    radial-gradient(800px 140px at 85% 50%, rgba(255,90,150,.32), rgba(0,0,0,0) 55%),
    linear-gradient(90deg, rgba(30,14,12,.92), rgba(60,10,20,.92));
}
.ox-topbarSlide.theme-lunar::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(10px 10px at 12% 40%, rgba(255,255,255,.28), rgba(0,0,0,0) 70%),
    radial-gradient(8px 8px at 22% 70%, rgba(255,255,255,.22), rgba(0,0,0,0) 70%),
    radial-gradient(9px 9px at 78% 35%, rgba(255,255,255,.22), rgba(0,0,0,0) 70%),
    radial-gradient(7px 7px at 90% 65%, rgba(255,255,255,.18), rgba(0,0,0,0) 70%);
  opacity: .75;
}

.ox-topbarSlide.theme-fire{
  background:
    radial-gradient(900px 160px at 20% 50%, rgba(255,120,60,.50), rgba(0,0,0,0) 55%),
    radial-gradient(700px 160px at 80% 50%, rgba(255,40,110,.35), rgba(0,0,0,0) 55%),
    linear-gradient(90deg, rgba(24,8,8,.92), rgba(60,10,10,.92));
}

.ox-topbarSlide.theme-support{
  background:
    radial-gradient(900px 160px at 30% 50%, rgba(88,130,255,.34), rgba(0,0,0,0) 55%),
    radial-gradient(700px 160px at 85% 50%, rgba(148,163,184,.26), rgba(0,0,0,0) 55%),
    linear-gradient(90deg, rgba(8,10,14,.92), rgba(12,12,14,.92));
}




/* ==========================================================
   MOBILE: remove extra top gap so burger sits right under topbar
   ========================================================== */
@media (max-width: 1023px){
  /* reduce header vertical padding on mobile */
  .ox-header{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* optionally tighten the nav row height a bit */
  .ox-brandLogo{ height: 24px !important; }

  /* burger aligned with brand and close to topbar */
  .ox-actions{
    align-items: center !important;
  }
}

/* ==========================================================
   MOBILE: hide TOPBAR close (X) button
   ========================================================== */
@media (max-width: 640px){
  .ox-topbarClose{
    display: none !important;
  }

  /* remove reserved right padding (if you added it earlier for the X) */
  .ox-topbarContent{
    padding-right: var(--ox-pad-x) !important;
  }
}








/* =========================
   FONT WEIGHTS — soften header typography
   ========================= */
.ox-link{ font-weight: 600 !important; }
.ox-cta{ font-weight: 700 !important; }
.ox-megaAll{ font-weight: 700 !important; }
.ox-dropHead{ font-weight: 700 !important; }

.ox-dropTitle{ font-weight: 700 !important; }
.ox-megaPromoTitle{ font-weight: 700 !important; }
.ox-pill{ font-weight: 700 !important; }

/* mobile */
.ox-mLink, .ox-mCTA, .ox-mToggle{ font-weight: 700 !important; }
.ox-mSubTitle{ font-weight: 700 !important; }

/* optional: make everything inside header slightly lighter by default */
.ox-headerWrap{ font-weight: 500; }