/* =========================================================
   Arcendium Premium Mobile Landing Header
========================================================= */

.arc-mobile-menu-button,
.arc-mobile-menu-panel,
.arc-mobile-menu-backdrop{
  display:none;
}

.nav,
.site-header,
header.nav{
  backdrop-filter:blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(180%) !important;
  background:rgba(255,255,255,.72) !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 18px 60px rgba(15,23,42,.06) !important;
}

html[data-theme="dark"] .nav,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] header.nav{
  background:rgba(7,16,26,.72) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.25) !important;
}

.arc-mobile-menu-button{
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid var(--border2, rgba(15,23,42,.14));
  background:
    radial-gradient(circle at 30% 20%, rgba(0,212,170,.18), transparent 35%),
    rgba(255,255,255,.78);
  color:var(--text, #0f172a);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(15,23,42,.10);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

html[data-theme="dark"] .arc-mobile-menu-button{
  background:
    radial-gradient(circle at 30% 20%, rgba(0,212,170,.20), transparent 35%),
    rgba(11,21,32,.78);
}

.arc-mobile-menu-button:hover{
  transform:translateY(-1px);
  border-color:rgba(0,212,170,.55);
  box-shadow:0 18px 45px rgba(0,212,170,.14);
}

.arc-mobile-menu-button svg{
  width:22px;
  height:22px;
}

.arc-mobile-menu-backdrop{
  position:fixed;
  inset:0;
  z-index:99980;
  background:rgba(15,23,42,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.arc-mobile-menu-panel{
  position:fixed;
  top:76px;
  left:14px;
  right:14px;
  z-index:99990;
  border-radius:28px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:0 28px 90px rgba(15,23,42,.20);
  padding:14px;
  opacity:0;
  transform:translateY(-10px) scale(.98);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}

html[data-theme="dark"] .arc-mobile-menu-panel{
  background:rgba(7,16,26,.86);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 28px 90px rgba(0,0,0,.38);
}

body.arc-landing-menu-open .arc-mobile-menu-backdrop,
body.arc-landing-menu-open .arc-mobile-menu-panel{
  display:block;
  opacity:1;
  pointer-events:auto;
}

body.arc-landing-menu-open .arc-mobile-menu-panel{
  transform:translateY(0) scale(1);
}

.arc-mobile-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 8px 14px;
  border-bottom:1px solid var(--border, rgba(15,23,42,.10));
}

.arc-mobile-menu-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.arc-mobile-menu-brand img{
  width:36px;
  height:auto;
  object-fit:contain;
}

html[data-theme="light"] .arc-mobile-menu-brand img{
  filter:brightness(0) saturate(100%) opacity(.92);
}

.arc-mobile-menu-brand strong{
  font-size:15px;
  letter-spacing:-.02em;
  color:var(--text, #0f172a);
}

.arc-mobile-menu-close{
  width:38px;
  height:38px;
  border-radius:14px;
  border:1px solid var(--border2, rgba(15,23,42,.14));
  background:var(--bg2, #fff);
  color:var(--text, #0f172a);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.arc-mobile-menu-links{
  display:grid;
  gap:8px;
  padding:12px 4px 4px;
}

.arc-mobile-menu-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  text-decoration:none;
  color:var(--text, #0f172a);
  background:rgba(248,250,252,.72);
  border:1px solid rgba(15,23,42,.07);
  font-size:14px;
  font-weight:750;
  letter-spacing:-.01em;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

html[data-theme="dark"] .arc-mobile-menu-links a{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.08);
}

.arc-mobile-menu-links a:hover{
  transform:translateY(-1px);
  border-color:rgba(0,212,170,.40);
  background:rgba(0,212,170,.08);
}

.arc-mobile-menu-links svg{
  width:19px;
  height:19px;
  color:var(--accent, #00d4a9);
  flex-shrink:0;
}

.arc-mobile-menu-cta{
  margin-top:8px;
  display:grid !important;
  place-items:center;
  min-height:48px;
  border-radius:20px !important;
  background:linear-gradient(135deg, #00d4a9, #00b894) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 18px 50px rgba(0,212,170,.22);
}

.arc-mobile-menu-foot{
  padding:12px 8px 4px;
  color:var(--text3, #64748b);
  font-size:12px;
  line-height:1.5;
}

@media(max-width:820px){
  .nav{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:99970 !important;
    min-height:68px !important;
  }

  .nav-container,
  .nav-inner,
  .nav-content{
    min-height:68px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .nav-logo,
  .brand,
  .logo{
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
  }

  .nav-logo-img,
  .logo-img{
    max-height:36px !important;
    width:auto !important;
  }

  html[data-theme="light"] .nav-logo-img,
  html[data-theme="light"] .logo-img{
    filter:brightness(0) saturate(100%) opacity(.92) !important;
  }

  .nav-links{
    display:none !important;
  }

  .nav-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    margin-left:auto !important;
  }

  .nav-actions > a,
  .nav-actions .btn,
  .nav-actions > .btn,
  .nav-actions > button:not(.arc-theme-toggle):not(.theme-toggle):not(.arc-mobile-menu-button){
    display:none !important;
  }

  .arc-theme-toggle,
  .theme-toggle{
    display:inline-flex !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:15px !important;
  }

  .arc-mobile-menu-button{
    display:inline-flex !important;
  }

  .hero,
  .landing-hero{
    padding-top:96px !important;
  }
}

@media(min-width:1181px){
  .arc-mobile-menu-backdrop,
  .arc-mobile-menu-panel,
  .arc-mobile-menu-button{
    display:none !important;
  }
}

/* Medium screens: retain the conversion actions without allowing the full
   navigation row to push Start Free beyond the viewport. */
@media(min-width:821px) and (max-width:1180px){
  .nav,
  header.nav{
    padding-left:18px !important;
    padding-right:18px !important;
    gap:14px !important;
    overflow:visible !important;
  }

  .nav-logo{
    width:186px !important;
    min-width:186px !important;
    max-width:186px !important;
    flex:0 0 186px !important;
  }

  .nav-logo-img{
    max-width:150px !important;
    height:58px !important;
    object-fit:contain !important;
  }

  .nav-links{
    display:none !important;
  }

  .nav-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    gap:8px !important;
    overflow:visible !important;
  }

  .nav-actions .btn,
  .nav-actions > a{
    display:inline-flex !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
    padding:9px 14px !important;
  }

  .nav-actions .theme-toggle{
    display:inline-flex !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
    padding:9px 12px !important;
  }

  .arc-mobile-menu-button,
  .arc-mobile-menu-panel,
  .arc-mobile-menu-backdrop{
    display:none !important;
  }
}



/* Final landing mobile/header brand polish */
.nav-logo-text,
.arc-mobile-menu-brand strong{display:none!important;}

html[data-theme="light"] .nav,
html[data-theme="light"] .site-header,
html[data-theme="light"] header.nav{
  background:rgba(255,255,255,.84)!important;
  border-bottom-color:rgba(15,23,42,.10)!important;
}

html[data-theme="dark"] .nav,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] header.nav{
  background:rgba(7,16,26,.86)!important;
  border-bottom-color:rgba(255,255,255,.10)!important;
}


/* =========================================================
   Final mobile landing menu viewport fit
   - fixes narrow mobile overflow/min-width feel
   - keeps menu inside the screen
========================================================= */
@media(max-width:820px){
  html,
  body[data-arc-page="landing"]{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .arc-mobile-menu-panel{
    box-sizing:border-box !important;
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    min-width:0 !important;
    left:10px !important;
    right:auto !important;
    top:72px !important;
    padding:12px !important;
    border-radius:22px !important;
    overflow:hidden !important;
  }

  .arc-mobile-menu-head{
    min-width:0 !important;
    padding:6px 4px 12px !important;
  }

  .arc-mobile-menu-brand,
  .arc-mobile-menu-links,
  .arc-mobile-menu-links a,
  .arc-mobile-menu-foot{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .arc-mobile-menu-links{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    padding:8px 0 0 !important;
  }

  .arc-mobile-menu-links a:not(.arc-mobile-menu-cta){
    width:100% !important;
    padding:13px 2px !important;
    border-top:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(15,23,42,.08) !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  html[data-theme="dark"] .arc-mobile-menu-links a:not(.arc-mobile-menu-cta){
    border-bottom-color:rgba(255,255,255,.08) !important;
    background:transparent !important;
  }

  .arc-mobile-menu-links a:not(.arc-mobile-menu-cta):hover{
    background:rgba(0,212,170,.07) !important;
    transform:none !important;
  }

  .arc-mobile-menu-links a > span{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .arc-mobile-menu-links svg{
    margin-left:auto !important;
  }

  .arc-mobile-menu-links a.arc-mobile-menu-cta{
    display:inline-flex !important;
    width:auto !important;
    min-width:0 !important;
    max-width:max-content !important;
    align-self:flex-start !important;
    justify-content:center !important;
    min-height:38px !important;
    height:38px !important;
    padding:0 16px !important;
    margin-top:12px !important;
    border-radius:999px !important;
    flex:0 0 auto !important;
  }

  .arc-mobile-menu-foot{
    padding:12px 2px 2px !important;
    font-size:11.5px !important;
  }
}

@media(max-width:360px){
  .arc-mobile-menu-panel{
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
    left:6px !important;
    padding:10px !important;
    border-radius:20px !important;
  }

  .arc-mobile-menu-links a:not(.arc-mobile-menu-cta){
    font-size:13px !important;
    padding:12px 1px !important;
  }
}

/* =========================================================
   V22.31.2 Receipt Navigation Drawer
   Medium -> small screens deliberately keep the landing bar quiet:
   Arcendium logo on the left, one unboxed menu glyph on the right.
   Every former header function lives in the receipt-style drawer.
========================================================= */
@media(max-width:1180px){
  .nav,
  header.nav{
    min-height:68px!important;
    height:68px!important;
    padding:0 18px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    overflow:visible!important;
  }

  .nav-logo{
    width:auto!important;
    min-width:0!important;
    max-width:min(190px,62vw)!important;
    flex:0 1 auto!important;
    display:flex!important;
    align-items:center!important;
  }
  .nav-logo-img{
    width:auto!important;
    max-width:min(170px,58vw)!important;
    height:auto!important;
    max-height:38px!important;
    object-fit:contain!important;
  }

  .nav-links{display:none!important}

  .nav-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex:0 0 auto!important;
    margin-left:auto!important;
    gap:0!important;
    overflow:visible!important;
  }
  .nav-actions > *:not(.arc-mobile-menu-button){display:none!important}

  .arc-mobile-menu-button{
    display:inline-flex!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    color:var(--text2,#475569)!important;
    position:relative!important;
    transition:color .18s ease,transform .18s ease!important;
  }
  .arc-mobile-menu-button::after{
    content:"";
    position:absolute;
    left:9px;
    right:9px;
    bottom:5px;
    height:1px;
    background:var(--accent,#00d4a9);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .2s ease;
  }
  .arc-mobile-menu-button:hover,
  .arc-mobile-menu-button:focus-visible{
    color:var(--accent,#00d4a9)!important;
    transform:translateY(-1px)!important;
  }
  .arc-mobile-menu-button:hover::after,
  .arc-mobile-menu-button:focus-visible::after{transform:scaleX(1)}
  .arc-mobile-menu-button:active{transform:translateY(1px) scale(.94)!important}

  .hero,
  .landing-hero{padding-top:96px!important}
}

/* Full-height receipt drawer: no floating rounded modal on tablet/mobile. */
.arc-mobile-menu-backdrop{
  z-index:620000!important;
  background:rgba(7,16,26,.36)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
}
.arc-mobile-menu-panel{
  z-index:620020!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:auto!important;
  width:min(390px,92vw)!important;
  max-width:92vw!important;
  height:100dvh!important;
  min-height:100vh!important;
  padding:0!important;
  border:0!important;
  border-left:1px solid var(--border2,rgba(15,23,42,.14))!important;
  border-radius:0!important;
  background:var(--bg2,#fff)!important;
  box-shadow:-26px 0 70px rgba(15,23,42,.18)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  font-family:'IBM Plex Mono',var(--font-m),monospace!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  opacity:0;
  transform:translateX(100%)!important;
  transition:transform .24s cubic-bezier(.22,.8,.28,1),opacity .18s ease!important;
}
html[data-theme="dark"] .arc-mobile-menu-panel{
  background:var(--bg2,#0b1520)!important;
  border-left-color:rgba(255,255,255,.12)!important;
  box-shadow:-26px 0 70px rgba(0,0,0,.42)!important;
}
body.arc-landing-menu-open .arc-mobile-menu-panel{
  display:block!important;
  opacity:1!important;
  transform:translateX(0)!important;
}
body.arc-landing-menu-open{overflow:hidden!important}

.arc-mobile-menu-head{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:18px 20px!important;
  border:0!important;
  border-bottom:1px dashed var(--border2,rgba(15,23,42,.16))!important;
  background:var(--bg2,#fff)!important;
}
html[data-theme="dark"] .arc-mobile-menu-head{background:var(--bg2,#0b1520)!important}
.arc-mobile-menu-brand img{
  width:auto!important;
  max-width:150px!important;
  max-height:34px!important;
  filter:none!important;
}
.arc-mobile-menu-close{
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  padding:6px 0!important;
  gap:7px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text2,#475569)!important;
  font-family:'IBM Plex Mono',var(--font-m),monospace!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  transition:color .18s ease,transform .18s ease!important;
}
.arc-mobile-menu-close:hover,
.arc-mobile-menu-close:focus-visible{color:var(--red,#ff4d6d)!important;transform:translateX(-1px)!important}

.arc-mobile-menu-receipt-meta{
  padding:18px 20px 12px!important;
  color:var(--text3,#64748b)!important;
  font-size:10px!important;
  line-height:1.55!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
.arc-mobile-menu-section{
  padding:0 20px!important;
}
.arc-mobile-menu-section + .arc-mobile-menu-section{
  margin-top:16px!important;
  padding-top:16px!important;
  border-top:1px dashed var(--border2,rgba(15,23,42,.16))!important;
}
.arc-mobile-menu-section-label{
  margin:0 0 6px!important;
  color:var(--text3,#64748b)!important;
  font-size:9px!important;
  font-weight:700!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
}
.arc-mobile-menu-links{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  padding:0!important;
}
.arc-mobile-menu-links a,
.arc-mobile-menu-links button{
  --arc-receipt-link-color:var(--accent,#00d4a9);
  width:100%!important;
  min-height:44px!important;
  display:grid!important;
  grid-template-columns:22px minmax(0,1fr) 18px!important;
  align-items:center!important;
  gap:10px!important;
  padding:11px 0!important;
  border:0!important;
  border-bottom:1px dotted var(--border,rgba(15,23,42,.10))!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text2,#475569)!important;
  text-align:left!important;
  text-decoration:none!important;
  font-family:'IBM Plex Mono',var(--font-m),monospace!important;
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:.01em!important;
  position:relative!important;
  transition:color .18s ease,transform .18s ease!important;
}
html[data-theme="dark"] .arc-mobile-menu-links a,
html[data-theme="dark"] .arc-mobile-menu-links button{border-bottom-color:rgba(255,255,255,.08)!important}
.arc-mobile-menu-links > :nth-child(3n+2){--arc-receipt-link-color:var(--accent2,#2563eb)}
.arc-mobile-menu-links > :nth-child(3n){--arc-receipt-link-color:#8b5cf6}
.arc-mobile-menu-links a::after,
.arc-mobile-menu-links button::after{
  content:"";
  position:absolute;
  left:32px;
  right:18px;
  bottom:6px;
  height:1px;
  background:var(--arc-receipt-link-color);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s ease;
}
.arc-mobile-menu-links a:hover,
.arc-mobile-menu-links a:focus-visible,
.arc-mobile-menu-links button:hover,
.arc-mobile-menu-links button:focus-visible{
  color:var(--arc-receipt-link-color)!important;
  background:transparent!important;
  transform:translateX(2px)!important;
}
.arc-mobile-menu-links a:hover::after,
.arc-mobile-menu-links a:focus-visible::after,
.arc-mobile-menu-links button:hover::after,
.arc-mobile-menu-links button:focus-visible::after{transform:scaleX(1)}
.arc-mobile-menu-links svg{
  width:18px!important;
  height:18px!important;
  color:currentColor!important;
  margin:0!important;
}
.arc-mobile-menu-links .arc-mobile-menu-arrow{justify-self:end!important;opacity:.55}
.arc-mobile-menu-links .arc-mobile-menu-label{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.arc-mobile-menu-foot{
  margin:18px 20px 0!important;
  padding:14px 0 24px!important;
  border-top:1px dashed var(--border2,rgba(15,23,42,.16))!important;
  color:var(--text3,#64748b)!important;
  font-family:'IBM Plex Mono',var(--font-m),monospace!important;
  font-size:10px!important;
  line-height:1.65!important;
}

@media(max-width:520px){
  .nav,header.nav{padding-left:14px!important;padding-right:12px!important}
  .arc-mobile-menu-panel{width:min(360px,94vw)!important;max-width:94vw!important}
  .arc-mobile-menu-head{padding:16px 16px!important}
  .arc-mobile-menu-receipt-meta,
  .arc-mobile-menu-section{padding-left:16px!important;padding-right:16px!important}
  .arc-mobile-menu-foot{margin-left:16px!important;margin-right:16px!important}
}

@media(prefers-reduced-motion:reduce){
  .arc-mobile-menu-panel,
  .arc-mobile-menu-button,
  .arc-mobile-menu-button::after,
  .arc-mobile-menu-links a,
  .arc-mobile-menu-links button,
  .arc-mobile-menu-links a::after,
  .arc-mobile-menu-links button::after{transition:none!important}
}

@media(max-width:1180px){
  body.arc-landing-menu-open .arc-mobile-menu-backdrop{
    display:block!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
}


/* V22.31.3: nested/mobile layer contract. The receipt drawer must sit above its blur backdrop. */
@media(max-width:1180px){
  .arc-mobile-menu-backdrop{z-index:620000!important}
  .arc-mobile-menu-panel{z-index:620020!important}
  body.arc-landing-menu-open .arc-mobile-menu-panel{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
}


/* =========================================================
   V22.31.4 — medium/small public-header simplification
   Landing and Store top bars show only the Arcendium brand + one menu glyph.
   Sign-in / Start Free / Theme stay inside the receipt drawer on landing.
   Store navigation/theme moves into the same receipt drawer.
========================================================= */
@media(max-width:1180px){
  /* Landing: explicitly keep every action except the drawer trigger out of the bar. */
  .nav .nav-actions > a,
  .nav .nav-actions > button:not(.arc-mobile-menu-button),
  header.nav .nav-actions > a,
  header.nav .nav-actions > button:not(.arc-mobile-menu-button){display:none!important}

  /* Store receives the same quiet, square public-header language. */
  .store-header{
    min-height:68px!important;
    height:68px!important;
    padding:0 18px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    overflow:visible!important;
    z-index:1000!important;
  }
  .store-brand{
    min-width:0!important;
    max-width:min(190px,62vw)!important;
    flex:0 1 auto!important;
  }
  .store-brand img{
    width:auto!important;
    max-width:min(170px,58vw)!important;
    height:auto!important;
    max-height:38px!important;
    object-fit:contain!important;
  }
  .store-brand span{display:none!important}
  .store-header nav{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:0!important;
    margin-left:auto!important;
    overflow:visible!important;
  }
  .store-header nav > *:not(.arc-mobile-menu-button){display:none!important}
  .store-header .arc-mobile-menu-button{display:inline-flex!important}
}

@media(max-width:520px){
  .store-header{padding-left:14px!important;padding-right:12px!important}
}


/* =========================================================
   V22.31.5 — hard mobile/tablet header compaction + Store context
   CSS and JS agree on one rule at <=1180px: the visible public bar contains
   the Arcendium brand and menu trigger only. Source actions remain available
   to the receipt drawer, but cannot occupy layout or keyboard focus.
========================================================= */
.store-brand > span{
  display:inline-flex!important;
  align-items:center!important;
  gap:.55rem!important;
  color:var(--text2,#64748b)!important;
  font-family:'IBM Plex Mono',var(--font-m),monospace!important;
  font-size:12px!important;
  font-weight:650!important;
  letter-spacing:.04em!important;
  white-space:nowrap!important;
}
.store-brand > span::before{
  content:"|";
  color:var(--border2,rgba(15,23,42,.28));
  font-weight:400;
}
html[data-theme="dark"] .store-brand > span::before{color:rgba(255,255,255,.28)}

@media(max-width:1180px){
  body.arc-public-header-compact [data-arc-drawer-source="1"],
  body[data-arc-page="landing"] .nav .nav-actions > a,
  body[data-arc-page="landing"] .nav .nav-actions > button:not(.arc-mobile-menu-button),
  body[data-arc-public-header="store"] .store-header nav > a,
  body[data-arc-public-header="store"] .store-header nav > button:not(.arc-mobile-menu-button){
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body[data-arc-page="landing"] .nav .nav-actions,
  body[data-arc-public-header="store"] .store-header nav{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:auto!important;
    min-width:42px!important;
    flex:0 0 auto!important;
    margin-left:auto!important;
    gap:0!important;
  }

  body[data-arc-page="landing"] .arc-mobile-menu-button,
  body[data-arc-public-header="store"] .arc-mobile-menu-button{
    display:inline-flex!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Keep the quiet mobile/tablet header: logo + menu only. The Store context
     is restored on desktop as “Arcendium | Store”, but intentionally lives in
     the receipt drawer meta on smaller screens. */
  .store-brand > span{display:none!important}
}


/* =========================================================
   V22.31.6 — Store context stays visible on every header size
   Store keeps the compact mobile/tablet public bar, but the brand context is
   intentionally “Arcendium | STORE” + menu rather than logo + menu only.
========================================================= */
body[data-arc-public-header="store"] .store-brand > span{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  flex:0 0 auto!important;
  text-transform:uppercase!important;
}

@media(max-width:1180px){
  body[data-arc-public-header="store"] .store-brand{
    display:inline-flex!important;
    align-items:center!important;
    gap:9px!important;
    max-width:min(250px,76vw)!important;
    overflow:visible!important;
  }
  body[data-arc-public-header="store"] .store-brand img{
    max-width:min(145px,47vw)!important;
    max-height:34px!important;
    flex:0 1 auto!important;
  }
  body[data-arc-public-header="store"] .store-brand > span{
    display:inline-flex!important;
    visibility:visible!important;
    pointer-events:auto!important;
    font-size:11.5px!important;
    letter-spacing:.055em!important;
  }
}

@media(max-width:390px){
  body[data-arc-public-header="store"] .store-brand{gap:7px!important;max-width:min(220px,78vw)!important}
  body[data-arc-public-header="store"] .store-brand img{max-width:min(126px,46vw)!important;max-height:31px!important}
  body[data-arc-public-header="store"] .store-brand > span{font-size:10.5px!important}
}


/* =========================================================
   V22.31.7 — Store brand separator cleanup
   store.css already draws the single vertical divider with border-left.
   Remove the later pseudo pipe so the brand reads Arcendium | STORE once,
   never Arcendium || STORE.
========================================================= */
body[data-arc-public-header="store"] .store-brand > span::before{
  content:none!important;
  display:none!important;
}