/* ============================================================================
   KICC · floating glass navigation + a real navigation drawer
   ----------------------------------------------------------------------------
   Two surfaces, one language.

   1. The bar. It was a full-width strip pinned to the top edge, 180px tall on
      a tablet because the page links dropped onto a second row and rendered as
      44px glass pills. Then it was flattened into a strip that still read as
      part of the page. It is now a floating pill: detached from the viewport
      edge, translucent over whatever film is behind it, one row, never
      wrapping. Above 1000px the five groups are visible and scroll
      horizontally if the viewport is too narrow for them; below that they move
      into the drawer, so the bar is ONE line at every width.

   2. The drawer. It was `.mobile-menu` — a flat charcoal sheet, a "CLOSE MENU"
      pill floating in the middle of it, then fifteen bold serif rows separated
      by hairlines: no grouping, no hierarchy, nothing to tell a county from a
      cart. It is now a grouped drawer with a titled header, a close control in
      the top-right where a thumb expects it, section labels, and rows with a
      chevron. Same links, same destinations — only the reading order changed.

   Loaded last in the head so it wins over the older sheets without a fresh
   round of `!important` archaeology in each of them.
   ========================================================================== */

:root{
  --kng-top: 8px;
  --kng-inset: 10px;
  --kng-radius: 16px;
  --kng-line: rgba(255,255,255,.12);
}

/* ── 1 · the bar ─────────────────────────────────────────────────────────── */
body:not(.admin-shell) #nav,
html[data-kicc-motion-engine] body:not(.admin-shell) #nav{
  top: var(--kng-top) !important;
  left: var(--kng-inset) !important;
  right: var(--kng-inset) !important;
  max-width: 1720px;
  margin: 0 auto;
  border-radius: var(--kng-radius) !important;
  border: 1px solid var(--kng-line) !important;
  border-bottom: 1px solid var(--kng-line) !important;
  background: rgba(13,17,21,.62) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.45) !important;
  backdrop-filter: blur(22px) saturate(1.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 10px 34px rgba(0,0,0,.30) !important;
  transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
/* A hairline highlight along the top edge is what reads as "glass" rather than
   "grey box". Scoped to the element itself so it follows the rounded corners. */
body:not(.admin-shell) #nav::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.10),transparent 38%,transparent 62%,rgba(255,205,5,.07));
  opacity:.9;
}
body:not(.admin-shell) #nav.scrolled,
html[data-kicc-motion-engine] body:not(.admin-shell) #nav.scrolled{
  background: rgba(11,14,18,.80) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 40px rgba(0,0,0,.42) !important;
}

body:not(.admin-shell) #nav .nav-inner,
html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-inner{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  width:100% !important;
  max-width:none !important;
  padding:5px 12px !important;   /* bar ≈ 54px tall: still inside the 63/73px band */
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body:not(.admin-shell) #nav .nav-inner > *{min-width:0}

/* The links: one row, nowrap, and scrollable instead of wrapping or hiding. */
body:not(.admin-shell) #nav .nav-links,
html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links{
  flex:1 1 auto !important;
  flex-wrap:nowrap !important;
  justify-content:center !important;
  gap:2px !important;
  /* Visible, not scrollable: a `.nav-drop-menu` lives inside this element, and
     `overflow-x:auto` forces overflow-y to auto too, which clips the panel.
     Above 1000px the five groups fit on one line; below, they are in the
     drawer. So there is nothing here to scroll. */
  overflow: visible !important;
  white-space: nowrap;
}
body:not(.admin-shell) #nav .nav-links > a,
body:not(.admin-shell) #nav .nav-links > .nav-drop > a{
  flex:0 0 auto;
  white-space:nowrap;
  border-radius:10px;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
/* Hover: a soft gold wash plus the caret nudging down — the interaction reads
   even when the pointer is over a label whose panel is not open yet. */
body:not(.admin-shell) #nav .nav-links > a:hover,
body:not(.admin-shell) #nav .nav-links > .nav-drop > a:hover,
body:not(.admin-shell) #nav .nav-drop:hover > a,
body:not(.admin-shell) #nav .nav-drop.menu-open > a{
  background: rgba(255,205,5,.13) !important;
}
body:not(.admin-shell) #nav .nav-drop > a:hover .nav-caret,
body:not(.admin-shell) #nav .nav-drop.menu-open .nav-caret{transform:translateY(1px);opacity:1}

/* Active: a gold rule under the current page, on the bar's own baseline so it
   never collides with the rounded top edge. */
body:not(.admin-shell) #nav .nav-links a[aria-current="page"],
body:not(.admin-shell) #nav .nav-links a.is-active{
  box-shadow: inset 0 -2px 0 #FFCD05 !important;
}

/* Utility cluster: the gold CTA is the one loud thing in the bar. */
body:not(.admin-shell) #nav .nav-cta{gap:6px !important;flex-wrap:nowrap !important}
body:not(.admin-shell) #nav .nav-cta-primary{
  border-radius:10px !important;
  box-shadow: 0 4px 14px rgba(255,205,5,.28) !important;
  transition: background-color .16s ease, transform .16s ease;
}
body:not(.admin-shell) #nav .nav-cta-primary:hover{background:#FFE066 !important;transform:translateY(-1px)}
body:not(.admin-shell) #nav .nav-account > summary,
body:not(.admin-shell) #nav .kicc-cart-link{
  border-radius:10px !important;
  transition: border-color .16s ease, background-color .16s ease;
}
body:not(.admin-shell) #nav .nav-account > summary:hover,
body:not(.admin-shell) #nav .kicc-cart-link:hover{background:rgba(255,255,255,.06) !important;border-color:rgba(255,205,5,.55) !important}
body:not(.admin-shell) #nav .burger{
  border-radius:11px !important;
  min-width:44px;min-height:44px;
  display:grid;place-items:center;
  line-height:1;
}
body:not(.admin-shell) #nav .burger:hover{background:rgba(255,205,5,.16) !important;border-color:rgba(255,205,5,.5) !important}

/* Where the bar ends up. Above 1000px the groups stay on the bar; below, they
   move into the drawer. Both cases are exactly one line. */
@media (min-width:1000px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links,
  body:not(.admin-shell) #nav .nav-links{display:flex !important}
  body:not(.admin-shell) #nav .burger{display:none !important}
}
@media (max-width:999px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links,
  .rb-nav .nav-links,
  body:not(.admin-shell) #nav .nav-links{display:none !important}
  body:not(.admin-shell) #nav .burger{display:grid !important}
  body:not(.admin-shell){--kng-inset:8px;--kng-top:6px;--kng-radius:14px}
}
@media (max-width:1150px){
  body:not(.admin-shell) #nav .nav-cta-primary{display:none !important}
}
@media (max-width:600px){
  body:not(.admin-shell) #nav .logo small{display:none !important}
  body:not(.admin-shell) #nav .nav-inner{padding:4px 8px !important;gap:6px !important}
  body:not(.admin-shell) #nav .nav-account > summary{padding:7px 9px !important;min-height:40px !important}
}

/* ── 2 · the drawer ──────────────────────────────────────────────────────── */
body:not(.admin-shell) .mobile-menu,
html[data-kicc-motion-engine] body:not(.admin-shell) .mobile-menu,
html[data-theme] body.experience-world .mobile-menu,
html[data-theme] :is(.mobile-menu),
.strict-kicc .mobile-menu{
  position: fixed !important;
  inset: 0 !important;
  z-index: 1100 !important;
  display: none;
  background: rgba(9,12,15,.72) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 0 !important;
  gap: 0 !important;
  color: #F7F4EE !important;
  overflow: hidden;
}
body:not(.admin-shell) .mobile-menu.open,
html[data-kicc-motion-engine] body:not(.admin-shell) .mobile-menu.open{display: flex !important; flex-direction: column !important}
body:not(.admin-shell) .mobile-menu[hidden]{display:none !important}

/* The sheet itself: rounded, inset, glassy, scrollable inside. */
body:not(.admin-shell) .mobile-menu .mm-sheet{
  position: relative;
  display: flex; flex-direction: column;
  margin: auto 0 0;                 /* docks to the bottom on a phone */
  width: 100%;
  max-height: min(88dvh, 760px);
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, rgba(20,25,30,.97), rgba(12,16,20,.99));
  border: 1px solid rgba(255,255,255,.12);
  border-bottom: 0;
  box-shadow: 0 -24px 60px rgba(0,0,0,.5);
  overflow: hidden;
  animation: kng-sheet .24s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes kng-sheet{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
@media (min-width:1000px){
  body:not(.admin-shell) .mobile-menu .mm-sheet{
    margin: auto; max-width: 520px; border-radius: 20px;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
}

body:not(.admin-shell) .mobile-menu .mm-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px 14px 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
  flex: 0 0 auto;
}
body:not(.admin-shell) .mobile-menu .mm-brand{
  display:flex; flex-direction:column; gap:2px; padding:0 !important; border:0 !important;
  font-family: var(--font-ui, system-ui, sans-serif) !important;
  font-size: 13px !important; font-weight: 700 !important; letter-spacing:.02em;
  color:#F7F4EE !important; text-decoration:none;
}
body:not(.admin-shell) .mobile-menu .mm-brand span{
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.55; font-weight:500;
}
body:not(.admin-shell) .mobile-menu .mm-close{
  flex:0 0 auto; display:grid; place-items:center;
  width:44px; height:44px; border-radius:12px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  color:#F7F4EE; font-size:15px; line-height:1; cursor:pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
body:not(.admin-shell) .mobile-menu .mm-close:hover{background:rgba(255,205,5,.16); border-color:rgba(255,205,5,.5)}

body:not(.admin-shell) .mobile-menu .mm-scroll{
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 2px;
}
body:not(.admin-shell) .mobile-menu .mm-label{
  margin: 12px 6px 4px !important; padding: 0 !important; border: 0 !important;
  font-family: var(--font-ui, system-ui, sans-serif) !important;
  font-size: 9.5px !important; font-weight: 600 !important; letter-spacing:.17em;
  text-transform: uppercase; color: rgba(255,205,5,.78) !important; opacity:1 !important;
  list-style: none;
}
body:not(.admin-shell) .mobile-menu .mm-label:first-child{margin-top:2px !important}
body:not(.admin-shell) .mobile-menu .mm-scroll > a{
  display: flex !important; align-items: center !important; justify-content: space-between;
  gap: 10px; min-height: 46px;
  padding: 11px 12px !important;
  border: 1px solid transparent !important; border-radius: 11px;
  font-family: var(--font-ui, system-ui, sans-serif) !important;
  font-size: 14.5px !important; font-weight: 500 !important; letter-spacing: 0;
  color: #E7E1D6 !important; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body:not(.admin-shell) .mobile-menu .mm-scroll > a .mm-chev{
  font-size: 15px; opacity:.38; transition: transform .15s ease, opacity .15s ease;
}
body:not(.admin-shell) .mobile-menu .mm-scroll > a:hover,
body:not(.admin-shell) .mobile-menu .mm-scroll > a:focus-visible{
  background: rgba(255,205,5,.10) !important;
  border-color: rgba(255,205,5,.28) !important;
  color: #FFFFFF !important;
}
body:not(.admin-shell) .mobile-menu .mm-scroll > a:hover .mm-chev{opacity:1; transform: translateX(2px)}
body:not(.admin-shell) .mobile-menu .mm-scroll > a[aria-current="page"]{
  color:#FFCD05 !important;
  background: rgba(255,205,5,.10) !important;
  box-shadow: inset 2px 0 0 #FFCD05;
}
body:not(.admin-shell) .mobile-menu .mm-foot{
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.09);
  display: grid; gap: 2px;
}
body:not(.admin-shell) .mobile-menu .mm-scroll > a.mm-soft{
  font-size: 13px !important; min-height: 42px; color: rgba(231,225,214,.68) !important;
}
@media (prefers-reduced-motion: reduce){
  body:not(.admin-shell) .mobile-menu .mm-sheet{animation:none !important}
}

/* Below the drawer on a phone the bar is glass, so the first section of a page
   needs no extra clearance: the bar sits inside the existing nav band. */

/* ── the red block behind Home and Marketplace ─────────────────────────────
   `#nav .nav-links a::after` is defined by an older sheet as a decorative
   panel: content:"", position:absolute, inset -14px/-48px, a slight rotation
   and z-index:-1. Its colour is then forced to var(--ui-accent) — so on the
   translucent bar it painted a rotated red rectangle behind every top-level
   link (measured 183 × 57px behind "Marketplace", 106 × 57px behind "Home").
   The current-page signal on this bar is the gold inset rule below, not a
   panel, so the pseudo-element is removed rather than recoloured. */
body:not(.admin-shell) #nav .nav-links > a::after,
body:not(.admin-shell) #nav .nav-links > .nav-drop > a::after,
html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links a::after{
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}
/* And the active state is a 2px gold rule on the bar's own baseline. */
body:not(.admin-shell) #nav .nav-links a[aria-current="page"],
body:not(.admin-shell) #nav .nav-links a.active{
  background: rgba(255,205,5,.10) !important;
  box-shadow: inset 0 -2px 0 #FFCD05 !important;
  color: #FFCD05 !important;
  -webkit-text-fill-color: #FFCD05 !important;
  border-radius: 10px 10px 4px 4px;
}

/* ── 3 · the bar follows the theme, not the page world ─────────────────────
   Measured on /marketplace and /watch before this: the bar kept its dark glass
   plate (rgba(13,17,21,.62)) while a light-theme document inked its links
   #17150F — 1.1:1, the "font is invisible in the tabs with a background"
   report. #nav .nav-links a, .logo and the utilities all decide ink from
   html[data-theme]; the plate above decided it from body.experience-world, so
   the two disagreed on every page that loads a film behind the bar. The plate
   is now chosen by the same attribute the ink uses, on every page. */
html[data-theme="light"] body:not(.admin-shell) #nav,
html[data-theme="light"] body.experience-world #nav,
body.light-world #nav{
  background: rgba(249,246,240,.88) !important;
  border: 1px solid rgba(11,11,11,.13) !important;
  border-bottom: 1px solid rgba(11,11,11,.13) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
  backdrop-filter: blur(22px) saturate(1.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 10px 30px rgba(20,17,12,.14) !important;
}
html[data-theme="light"] body:not(.admin-shell) #nav::after,
body.light-world #nav::after{
  background: linear-gradient(100deg,rgba(255,255,255,.75),transparent 40%,transparent 60%,rgba(255,205,5,.16));
  opacity: .7;
}
html[data-theme="dark"] body:not(.admin-shell) #nav,
body.experience-world:not(.light-world) #nav{
  background: rgba(11,15,19,.74) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.45) !important;
  backdrop-filter: blur(22px) saturate(1.45) !important;
}
/* The utilities sit inside the same plate, so they take the same ink. */
html[data-theme="light"] body:not(.admin-shell) #nav :is(.logo,.logo span,.logo small,.nav-util a,.nav-util button,.nav-account>summary,.theme-toggle,.theme-toggle span,.nav-caret,.burger), 
body.light-world #nav :is(.logo,.logo span,.logo small,.nav-util a,.nav-util button,.nav-account>summary,.theme-toggle,.theme-toggle span,.nav-caret,.burger){
  color: #17150F !important; -webkit-text-fill-color: #17150F !important;
}
html[data-theme="dark"] body:not(.admin-shell) #nav :is(.logo,.logo span,.logo small,.nav-util a,.nav-util button,.nav-account>summary,.theme-toggle,.theme-toggle span,.nav-caret,.burger),
body.experience-world:not(.light-world) #nav :is(.logo,.logo span,.logo small,.nav-util a,.nav-util button,.nav-account>summary,.theme-toggle,.theme-toggle span,.nav-caret,.burger){
  color: #F4EFE6 !important; -webkit-text-fill-color: #F4EFE6 !important;
}