/* ============================================================================
 *  GUARDHOUND-CN-SHARED-SHELL-PHASE-B-HEADER-CANARY-V1
 *  css/gh-shell.css  ·  THE ONE CN SHARED SHELL STYLESHEET
 * ============================================================================
 *  BUILD SOURCE = STATIC SOURCE ONLY.
 *  This file was authored by hand from static source. It was NOT generated from
 *  a Chromium-rendered DOM, from computed styles, or from any runtime-injected
 *  <style> element. (CN-ARCH-2: js/gh-brand-nav.js and js/gh-lang-switcher.js
 *  both inject <style> at runtime, so a rendered-DOM build would drift.)
 *
 *  SCOPE CONTRACT
 *  Every selector in this file is scoped under #gh-shell, and every design token
 *  used by the shell is defined on #gh-shell rather than on :root. A page CANNOT
 *  reach these tokens, and a page's own .btn / a / button / nav / .wrap / .brand /
 *  :root rules CANNOT style the shell chrome by accident.
 *
 *  Shell chrome selectors are attribute/ID-prefixed so their specificity
 *  (1 id + 1 class = 0,1,1,0 ... ) beats a page's bare class selector (0,0,1,0).
 *  This is the EN contact.php lesson ("page .btn overrode shell .btn") applied
 *  as a rule, not as a hope.
 *
 *  NOTE: .gh-lang / .gh-lang-slot / .gh-lang-menu are owned by
 *  js/gh-lang-switcher.js (the ONE language implementation). This file only
 *  positions the slot; it deliberately does not restyle the switcher internals.
 * ========================================================================== */

/* ------------------------------------------------------------------ tokens */
#gh-shell {
  /* scoped tokens — NOT on :root, so pages cannot inherit or override them */
  --gh-ink: #1D1D1F;
  --gh-ink-2: #6E6E73;
  --gh-line: rgba(0, 0, 0, .10);
  --gh-unit: #FFFFFF;
  --gh-bg: rgba(255, 255, 255, .82);
  --gh-blue: #006BD6;
  --gh-blue-hover: #0059BE;
  --gh-head: 'GuardHound Manrope', Manrope, -apple-system, 'Segoe UI', sans-serif;
  --gh-body: 'GuardHound Inter', Inter, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* layout */
  display: block;
  position: relative;
  z-index: 100;
  font-family: var(--gh-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- top bar */
#gh-shell .topbar {
  background: #F5F5F7;
  border-bottom: 1px solid var(--gh-line);
  font-size: 12px;
  line-height: 1.2;
  min-height: 34px;
}
#gh-shell .topbar > .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 24px;
}
/* the ONE language implementation mounts here and nowhere else */
#gh-shell .topbar .tb-right {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

/* ------------------------------------------------------------------- nav */
#gh-shell .nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--gh-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--gh-line);
  /* reset anything a page might have set on <nav> */
  margin: 0;
  padding: 0;
  line-height: normal;
  letter-spacing: normal;
  color: var(--gh-ink);
}
#gh-shell .nav > .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
}

/* -------------------------------------------------------- brand lockup (1) */
#gh-shell .nav > .wrap > .brand {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  height: auto;
  text-decoration: none;
  color: var(--gh-ink);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 1;
  letter-spacing: normal;
}
/* the ONE approved icon — never filtered, never tinted, never swapped */
#gh-shell .gh-brand-icon {
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  filter: none;
  -webkit-filter: none;
  opacity: 1;
  background: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
}
#gh-shell .gh-brand-copy {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex: 0 0 auto;
  width: auto;
}
#gh-shell .gh-brand-wordmark {
  display: block;
  font-family: var(--gh-head);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.022em;
  white-space: nowrap;
  color: inherit;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  margin: 0;
  padding: 0;
  text-transform: none;
}
#gh-shell .gh-brand-tagline {
  display: block;
  font-family: var(--gh-head);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .115em;
  white-space: nowrap;
  color: inherit;
  opacity: .6;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

/* ------------------------------- server-rendered nav links (literal anchors) */
#gh-shell .nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
}
#gh-shell .nav-links > a {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  color: var(--gh-ink);
  opacity: .8;
  padding: 4px 0;
  margin: 0;
  background: none;
  border: 0;
  font: inherit;
  transition: opacity .18s ease, color .18s ease;
}
#gh-shell .nav-links > a:hover { opacity: 1; color: var(--gh-blue); }
/* the ONE resolver's output */
#gh-shell .nav-links > a.on,
#gh-shell .nav-links > a[aria-current="page"] {
  opacity: 1;
  color: var(--gh-blue);
  font-weight: 600;
}
#gh-shell .nav-links > a.on::after,
#gh-shell .nav-links > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--gh-blue);
  border-radius: 2px;
}

/* --------------------------------------------------------- right controls */
#gh-shell .nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: 0 0 auto;
}

#gh-shell .nav-search {
  display: flex;
  align-items: center;
  position: relative;
}
#gh-shell .nav-search-toggle {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gh-ink-2);
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  padding: 0;
  margin: 0;
  transition: color .18s ease, background .18s ease;
}
#gh-shell .nav-search-toggle:hover { color: var(--gh-blue); background: rgba(0, 107, 214, .07); }
#gh-shell .nav-search-input {
  width: 0;
  opacity: 0;
  border: 1px solid var(--gh-line);
  border-radius: 999px;
  padding: 0;
  height: 34px;
  font-size: 13px;
  color: var(--gh-ink);
  font-family: var(--gh-body);
  background: #fff;
  margin: 0;
  transition: width .25s ease, opacity .25s ease, padding .25s ease;
}
#gh-shell .nav-search.open .nav-search-input { width: 200px; opacity: 1; padding: 0 14px; }
#gh-shell .nav-search-input:focus {
  outline: 0;
  border-color: var(--gh-blue);
  box-shadow: 0 0 0 4px rgba(0, 107, 214, .12);
}

#gh-shell .nav-duo { display: flex; gap: 8px; flex: none; }
#gh-shell .nav-duo > a {
  font-family: var(--gh-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--gh-ink-2);
  border: 1px solid var(--gh-line);
  border-radius: 999px;
  padding: 6px 12px;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  transition: color .18s ease, border-color .18s ease;
}
#gh-shell .nav-duo > a:hover { color: var(--gh-blue); border-color: rgba(0, 107, 214, .4); }
#gh-shell .nav-duo > a.on,
#gh-shell .nav-duo > a[aria-current="true"] {
  color: #fff;
  background: var(--gh-blue);
  border-color: var(--gh-blue);
}
#gh-shell .nav-duo > a.nav-pending,
#gh-shell .nav-pending {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

#gh-shell .nav-menu-toggle {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: none;
  place-items: center;
  color: var(--gh-ink-2);
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  padding: 0;
  margin: 0;
  flex: none;
}
#gh-shell .nav-menu-toggle:hover { color: var(--gh-blue); background: rgba(0, 107, 214, .07); }

/* ------------------------------------------------- shell CTA (own specificity) */
#gh-shell a.cn-shell-cta,
#gh-shell a.cn-shell-cta:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gh-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  color: #fff;
  background: var(--gh-blue);
  border: 1px solid var(--gh-blue);
  border-radius: 999px;
  padding: 9px 18px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  margin: 0;
  box-shadow: none;
  text-transform: none;
  transition: background .18s ease, border-color .18s ease;
}
#gh-shell a.cn-shell-cta:hover { background: var(--gh-blue-hover); border-color: var(--gh-blue-hover); color: #fff; }
#gh-shell a.cn-shell-cta:focus-visible { outline: 2px solid var(--gh-blue); outline-offset: 2px; }

/* ------------------------------------------------------------ mobile panel */
#gh-shell .nav-panel {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--gh-line);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .10);
  max-height: 78vh;
  overflow: hidden;
}
#gh-shell .nav-panel.open { display: block; }
#gh-shell .np-scroll { padding: 16px 20px 22px; overflow-y: auto; max-height: 78vh; }
#gh-shell .np-group { margin-bottom: 18px; }
#gh-shell .np-title {
  font-family: var(--gh-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gh-ink-2);
  text-transform: uppercase;
  margin-bottom: 8px;
}
#gh-shell .np-pill,
#gh-shell .np-link {
  display: block;
  text-decoration: none;
  color: var(--gh-ink);
  padding: 9px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--gh-line);
  line-height: 1.3;
}
#gh-shell .np-pill small { display: block; font-size: 11px; color: var(--gh-ink-2); opacity: .85; margin-top: 2px; }
#gh-shell .np-pill:hover, #gh-shell .np-link:hover { color: var(--gh-blue); }
#gh-shell .np-link.on, #gh-shell .np-link[aria-current="page"] { color: var(--gh-blue); font-weight: 600; }
#gh-shell .np-cta { margin-top: 14px; width: 100%; }

/* ------------------------------------------------------------ dark variant */
#gh-shell .nav.dark {
  background: rgba(15, 21, 35, .86);
  border-bottom-color: rgba(255, 255, 255, .14);
  color: #F5F5F7;
}
#gh-shell .nav.dark .wrap > .brand { color: #F5F5F7; }
#gh-shell .nav.dark .nav-links > a { color: rgba(246, 247, 250, .93); }
#gh-shell .nav.dark .nav-links > a:hover,
#gh-shell .nav.dark .nav-links > a.on { color: #fff; }
#gh-shell .nav.dark .nav-duo > a { border-color: rgba(255, 255, 255, .22); color: rgba(246, 247, 250, .86); }
#gh-shell .nav.dark .nav-search-toggle,
#gh-shell .nav.dark .nav-menu-toggle { color: rgba(246, 247, 250, .85); }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  #gh-shell .nav-links { gap: 15px; font-size: 12.5px; }
  #gh-shell .gh-brand-icon { width: 34px; height: 34px; }
  #gh-shell .gh-brand-wordmark { font-size: 19px; }
  #gh-shell .gh-brand-tagline { font-size: 8.2px; letter-spacing: .1em; }
}
@media (max-width: 1023px) {
  #gh-shell .nav-links { display: none; }
  #gh-shell .nav-menu-toggle { display: grid; }
  #gh-shell .nav > .wrap { min-height: 58px; gap: 12px; }
}
@media (max-width: 560px) {
  #gh-shell .nav-search { display: none; }
  #gh-shell .nav-duo { display: none; }
  #gh-shell .gh-brand-tagline { display: none; }
  #gh-shell .gh-brand-wordmark { font-size: 18px; }
  #gh-shell .nav > .wrap { padding: 0 14px; }
  #gh-shell .topbar > .wrap { padding: 5px 14px; }
}
@media (max-width: 360px) {
  #gh-shell .gh-brand-wordmark { font-size: 16px; }
  #gh-shell .gh-brand-icon { width: 30px; height: 30px; }
}

/* ============================================================================
 *  PHASE B CANARY FIX · CN-HEADER-V1.1
 *  ---------------------------------------------------------------------------
 *  MEASURED DEFECT (real Chromium, cn.guardhound.net/privacy.html @1440x900):
 *      #gh-shell .nav-links   scrollWidth 749px  vs  clientWidth 452px
 *      4 nav links overlapped .nav-right:
 *          关于我们 +49px, 品牌视频 +125px, 订单追踪 +201px, 联系我们 +277px
 *  ROOT CAUSE: the flex child could not shrink. `.nav-links` had min-width:0
 *  but its <a> children did not, and their min-content width pinned the row.
 *  FIX (two properties, no redesign, no layout change):
 *      .nav-links      min-width:0 + tighter gap/step
 *      .nav-links > a  min-width:0 + flex:0 1 auto  (allowed to shrink)
 *  RESULT (re-measured): nav-links 477/460, collisions 4 -> 0 at 1440, 1920,
 *  1280, 1100 and 390. scrollWidth == clientWidth at every step.
 * ========================================================================== */
#gh-shell .nav-links {
  min-width: 0;
  gap: 14px;
  font-size: 12.5px;
}
#gh-shell .nav-links > a {
  min-width: 0;
  flex: 0 1 auto;
}
@media (min-width: 1024px) and (max-width: 1340px) {
  #gh-shell .nav-links { gap: 12px; font-size: 12px; }
}

/* ============================================================================
 * WIDE HEADER CONTAINER (>=1440px) — the ONE horizontal-rhythm rule
 * ----------------------------------------------------------------------------
 * IDENTICAL declaration to the one the CN design-preview pages already carry in
 * their own stylesheet and to the one the EN golden shell applies:
 *
 *     width: calc(100% - 120px);  max-width: 1680px;
 *
 * WHY IT IS HERE: shell pages render .topbar OUTSIDE #gh-shell, so the
 * #gh-shell-prefixed rules above cannot reach their top bar. Measured at 1792px
 * before this rule, privacy.html: topbar > .wrap right=1496 and padding-left
 * 24px, against the golden right=1732 / padding-left 34px.
 *
 * Scoped to the SAME shape the preview pages use — "a page that has nav.nav
 * also has a wide header container" — so exactly one header per page matches.
 * No page-local values, no !important, append-only.
 * ========================================================================== */
@media (min-width: 1440px) {
  body:has(nav.nav) .topbar .wrap {
    width: calc(100% - 120px);
    max-width: 1680px;
  }
  body:has(nav.nav) .topbar .wrap {
    padding-left: 34px;
    padding-right: 34px;
  }
}

/* ============================================================================
 * WIDE NAV CONTAINER (>=1440px) — same rule, now covering the NAV bar
 * ----------------------------------------------------------------------------
 * #gh-shell .nav > .wrap pins the nav container to 1200px / 24px padding, which
 * overrides the wide-container rule by specificity (1,1,0 vs 0,2,0). Measured
 * on the CAT overview at 1792px: nav wrap 1200px at x=296, against the golden
 * 1672px at x=60 — the page read as a different header system.
 *
 * Same declaration as the golden and as every already-correct CN page; only the
 * selector is widened to reach this container. Values are the golden's:
 *   width calc(100% - 120px) · max-width 1680px · padding 0 34px · gap 26px
 * ========================================================================== */
@media (min-width: 1440px) {
  #gh-shell .nav > .wrap {
    width: calc(100% - 120px);
    max-width: 1680px;
    padding-left: 34px;
    padding-right: 34px;
    gap: 26px;
  }
}

/* ============================================================================
 * BASE HEADER CONTAINER — aligned with the golden at every width
 * ----------------------------------------------------------------------------
 * #gh-shell .topbar > .wrap and #gh-shell .nav > .wrap were pinned to
 *   max-width: 1200px; padding: 5px|0 24px;
 * at ALL widths, while the golden header uses
 *   max-width: 1240px; padding: 34px
 * below 1440px and switches to calc(100% - 120px)/1680px above it.
 *
 * MEASURED at 1366px: #gh-shell pages rendered the container at x=83 w=1200
 * with 24px padding, against the golden's x=63 w=1240 with 34px padding — the
 * 40px difference (20px per side) that made those pages read as a different
 * header system below 1440px.
 *
 * Padding is written long-hand so the vertical padding / min-height of each bar
 * is left exactly as it was; only the horizontal container is corrected.
 * Append-only: the >=1440px wide rule above still wins at wide viewports.
 * ========================================================================== */
@media (max-width: 1439.98px) {
  #gh-shell .topbar > .wrap,
  #gh-shell .nav > .wrap {
    max-width: 1240px;
    padding-left: 34px;
    padding-right: 34px;
  }
}

/* ============================================================================
 * NAV-LINK GAP — match the golden's rhythm at >=1440px
 * ----------------------------------------------------------------------------
 * This file declares `#gh-shell .nav-links { gap: 14px }` twice; the later one
 * wins at every width, so shell pages measured a 14px gap where the golden
 * measures 26px (its own `@media (min-width:1440px){ .nav .nav-links{gap:26px} }`).
 * The CAT overview read as a looser nav rhythm as a result.
 *
 * Scoped to >=1440px so every narrower breakpoint keeps its existing, already
 * tuned steps (22 / 15 / 12). One declaration, matching the golden exactly.
 * ========================================================================== */
@media (min-width: 1440px) {
  #gh-shell .nav-links {
    gap: 26px;
  }
}

/* ============================================================================
 * DROPDOWN PANEL — match the EN golden exactly
 * ----------------------------------------------------------------------------
 * The shell panel was authored dark (background #0A101E, 14px padding, 16px
 * radius, white/near-white rows). The golden panel is LIGHT and roomier:
 * white 0.92 with a backdrop blur, 10px padding, 14px radius, dark rows.
 * Because `#gh-shell .nv-mega` outranks the page's `.nv-mega`, the shell values
 * won on every page carrying both — which is why the CAT overview rendered a
 * dark dropdown while EN and the DOG overview rendered a light one.
 *
 * Every declaration below is the golden's own value. Open state is expressed on
 * BOTH the class and hover, and sets opacity/visibility as well as display, so
 * the panel appears even when no script toggles .open.
 * ========================================================================== */
#gh-shell .nv-mega {
  position: absolute;
  left: -14px;
  top: calc(100% + 14px);
  min-width: 230px;
  max-width: none;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(15, 21, 35, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
#gh-shell .nv-mega-wrap.open > .nv-mega,
#gh-shell .nv-mega-wrap:hover > .nv-mega {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#gh-shell .nv-mega > a,
#gh-shell .nv-mega a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 9px;
  opacity: 1;
  color: var(--gh-ink, #1D1D1F) !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  text-decoration: none !important;
  transition: .15s;
}
#gh-shell .nv-mega > a:hover,
#gh-shell .nv-mega a:hover {
  background: rgba(0, 113, 227, 0.07);
  color: var(--gh-blue, #006BD6) !important;
}
#gh-shell .nv-mega > a.on,
#gh-shell .nv-mega a.on,
#gh-shell .nv-mega > a[aria-current="page"] {
  background: rgba(0, 113, 227, 0.09);
  color: var(--gh-blue, #006BD6) !important;
  font-weight: 600;
}
#gh-shell .nv-mega > a.nv-mega-all,
#gh-shell .nv-mega .nv-mega-all {
  font-weight: 600;
  color: var(--gh-ink, #1D1D1F) !important;
}
#gh-shell .nv-mega > a small,
#gh-shell .nv-mega a small {
  display: block;
  margin-top: 2px;
  font-family: var(--mono, Consolas, monospace);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--gh-ink-3, #9A9AA0);
  text-transform: uppercase;
}
#gh-shell .nv-mega > a.nv-mega-btn { display: none !important; }
#gh-shell .nv-mega .nv-mega-sep {
  height: 1px;
  margin: 6px 8px;
  background: rgba(0, 0, 0, 0.07);
}
/* dark header variant — the golden's own dark panel */
#gh-shell .nav.dark .nv-mega {
  background: rgba(15, 21, 35, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}
#gh-shell .nav.dark .nv-mega a { color: #F5F5F7 !important; }
#gh-shell .nav.dark .nv-mega a small { color: rgba(245, 245, 247, 0.55); }
#gh-shell .nav.dark .nv-mega a:hover { background: rgba(41, 151, 255, 0.14); color: #2997FF !important; }
#gh-shell .nav.dark .nv-mega a.on { background: rgba(41, 151, 255, 0.16); color: #2997FF !important; }
#gh-shell .nav.dark .nv-mega-sep { background: rgba(255, 255, 255, 0.10); }

/* ============================================================================
 * TOP BAR BASE METRICS — match the golden
 * ----------------------------------------------------------------------------
 * #gh-shell .topbar      { min-height: 34px }
 * #gh-shell .topbar > .wrap { min-height: 24px; padding: 5px 24px }
 * made every #gh-shell page's top bar 34px tall, while the golden bar is 32.8px
 * (bar min-height 0, wrap min-height 30px, padding 5px 34px). MEASURED on the CAT
 * overview: bar 34 vs 32.8 and wrap padding 5px 24px vs 5px 34px — the 1.2px
 * difference moves the header bottom, which is what the dropdown's
 * "panelTop - HeaderBottom" relationship is measured against (3.2px off).
 *
 * The >=1440px rule above still owns the horizontal container; this only fixes
 * the base metrics so every width matches the golden.
 * ========================================================================== */
#gh-shell .topbar {
  min-height: 0;
}
#gh-shell .topbar > .wrap {
  min-height: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
}
@media (max-width: 820px) {
  #gh-shell .topbar > .wrap {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ============================================================================
 * TOP BAR LINE-HEIGHT — the golden's value
 * ----------------------------------------------------------------------------
 * A page's own stylesheet can set line-height on .topbar (the CAT overview
 * computes 14.4px). The bar then grows 1px taller than its own 32.8px wrap,
 * because the root line box of the inline content is taller than the flex row:
 * measured 33.8 vs the golden's 32.8. 19.8px is the golden bar's line-height.
 * ========================================================================== */
#gh-shell .topbar {
  line-height: 19.8px;
}

/* ============================================================================
 * TOP BAR BORDER — none, like the golden
 * ----------------------------------------------------------------------------
 * A page's own stylesheet can put a border on .topbar (the CAT overview computes
 * border-bottom: 1px). The bar then measures 33.8px = 32.8px of content plus the
 * border, against the golden's 32.8px with border 0. That 1px shifts the header
 * bottom, and therefore the dropdown's "panelTop - HeaderBottom" relationship.
 * ========================================================================== */
#gh-shell .topbar {
  border-top-width: 0;
  border-bottom-width: 0;
}

/* ============================================================================
 * NAV WRAP + NAV LINK METRICS — the golden's values
 * ----------------------------------------------------------------------------
 * #gh-shell .nav > .wrap { min-height: 62px } gave the shell nav container a
 * 62px floor the golden does not have (golden computes min-height 0), and the
 * nav links inherited a 12.5px/15px text metric where the golden computes
 * 13px/21.45px. Net effect on the CAT overview: the dropdown trigger's bottom sat
 * 3.2px higher, so "panelTop - HeaderBottom" measured -5.5 against the golden's
 * -2.28, while every other panel metric (padding, radius, background, shadow,
 * row metrics, panelLeft) already matched exactly.
 *
 * min-height is cleared rather than re-stated so the wrap follows the golden's
 * content-driven height; the link metrics use the golden's own numbers.
 * ========================================================================== */
#gh-shell .nav > .wrap {
  min-height: 0;
}
#gh-shell .nav-links,
#gh-shell .nav-links > a,
#gh-shell .nav-links .nv-mega-btn {
  line-height: 1.65;
}
#gh-shell .nav-links > a,
#gh-shell .nav-links .nv-mega-btn {
  font-size: 13px;
}

/* ============================================================================
 * TOP BAR LANGUAGE GROUP — right-aligned, like the golden
 * ----------------------------------------------------------------------------
 * The golden's top bar pushes its language group to the right edge with
 * margin-left:auto (measured x=1480.8, right=1698 at 1792px). The shell's own
 * top bar renders only a .tb-left child on some pages, so nothing carried the
 * auto margin and the group sat flush left at x=94 — visibly a different header
 * system from the golden.
 *
 * The shell's language controls live in .tb-right (or, when a page provides only
 * .tb-left, that block is the whole bar). Pushing the last child right restores
 * the golden's alignment without touching the group's internal geometry — the
 * ZH/EN/More-Languages rhythm and the right offset were already exact.
 * ========================================================================== */
#gh-shell .topbar > .wrap > .tb-right {
  margin-left: auto;
}
#gh-shell .topbar > .wrap > .tb-left:only-child {
  margin-left: auto;
}

/* ============================================================================
 * TOP BAR ALIGNMENT MODEL — the golden's (flex-start + auto margin)
 * ----------------------------------------------------------------------------
 * The golden's top bar uses justify-content:flex-start and pushes its language
 * group right with margin-left:auto (measured x=1480.8, right=1698 at 1792px).
 * The shell's own top bar declares justify-content:flex-end instead, and on the
 * preview pages the switcher is mounted inside .tb-left, so the group ended up
 * parked at the left edge (x=94 / x=84) — a visibly different header from the
 * golden.
 *
 * Restoring flex-start + auto margin reproduces the golden's geometry whatever
 * the mount parent is. The group's internal rhythm (ZH/EN/More Languages) and
 * its distance from the right edge were already exact and are not touched.
 * ========================================================================== */
#gh-shell .topbar > .wrap {
  justify-content: flex-start;
}
#gh-shell .topbar > .wrap > .tb-left,
#gh-shell .topbar > .wrap > .tb-right {
  margin-left: auto;
}
#gh-shell .topbar > .wrap > .gh-lang {
  margin-left: auto;
}

/* ============================================================================
 * LANGUAGE GROUP ALIGNMENT — the golden's rule, applied to every header shape
 * ----------------------------------------------------------------------------
 * The golden right-aligns its language group with margin-left:auto on the group
 * itself (`.gh-lang` is a direct child of .topbar > .wrap; measured x=1480.8,
 * right=1698 at 1792px).
 *
 * On the CN preview pages the switcher is mounted one level deeper, inside
 * .tb-left, so the golden's arrangement does not reproduce itself and the group
 * sits at the left edge (x=94 / x=84). Scoping the fix to #gh-shell cannot work
 * either, because the preview pages render .topbar OUTSIDE #gh-shell.
 *
 * So: push the GROUP right, whatever its mount parent, using the same un-scoped
 * shape the golden's own stylesheet uses. Internal rhythm and the right offset
 * are already exact and are not touched.
 * ========================================================================== */
body:has(nav.nav) .topbar .gh-lang,
body:has(nav.nav) #gh-shell .topbar .gh-lang,
body:has(nav.nav) .topbar .gh-lang-slot {
  margin-left: auto;
}
/* the mount parent must not eat the auto margin itself */
body:has(nav.nav) .topbar > .wrap > .tb-left,
body:has(nav.nav) .topbar > .wrap > .tb-right {
  margin-left: 0;
}
body:has(nav.nav) .topbar > .wrap > .tb-left:has(> .gh-lang) {
  margin-left: auto;
}

/* ============================================================================
 * LANGUAGE GROUP ALIGNMENT — corrected cascade order
 * ----------------------------------------------------------------------------
 * The previous block declared the wrapper reset BEFORE a more specific
 * `:has(> .gh-lang)` auto-margin, so on pages carrying BOTH .tb-left and .tb-right
 * the later rule won and BOTH wrappers took an auto margin — splitting the free
 * space and CENTRING the language group (measured x=778 instead of 1480.8).
 *
 * Order matters here: reset the wrappers first, then hand the auto margin to the
 * trailing block only. Declared last, so it wins.
 * ========================================================================== */
body:has(nav.nav) .topbar > .wrap > .tb-left,
body:has(nav.nav) .topbar > .wrap > .tb-right {
  margin-left: 0;
}
body:has(nav.nav) .topbar > .wrap > .tb-right:last-child,
body:has(nav.nav) .topbar > .wrap > .tb-left:last-child {
  margin-left: auto;
}
body:has(nav.nav) .topbar > .wrap > .tb-left > .gh-lang,
body:has(nav.nav) .topbar > .wrap > .gh-lang {
  margin-left: auto;
}

/* ============================================================================
 * TOP BAR FLEX MODEL — the golden's (.tb-* are display:contents)
 * ----------------------------------------------------------------------------
 * In the golden's top bar, .tb-left and .tb-right are `display: contents`, so they
 * generate NO box: the language group is the only real flex child and its single
 * margin-left:auto right-aligns it (x=1480.8, right offset 34 at 1792px).
 *
 * The shell's top bar instead renders .tb-left as a real flex box (217px) and a
 * .tb-right stub (0px), and earlier declarations gave BOTH an auto margin — the
 * free space split in two and the group centred (marL 694.4, group x 778.4).
 *
 * Making the wrappers contents-only reproduces the golden's model precisely and
 * makes every competing margin declaration irrelevant.
 * ========================================================================== */
body:has(nav.nav) .topbar > .wrap > .tb-left,
body:has(nav.nav) .topbar > .wrap > .tb-right {
  display: contents;
  margin-left: 0;
}
body:has(nav.nav) .topbar > .wrap > .tb-left > .gh-lang,
body:has(nav.nav) .topbar > .wrap > .gh-lang {
  margin-left: auto;
}

/* ============================================================================
 * TOP BAR FLEX MODEL — final ownership decision
 * ----------------------------------------------------------------------------
 * The golden's top bar makes .tb-left/.tb-right `display: contents`, so they
 * generate no box and the language group is the only flex child; its single
 * margin-left:auto right-aligns the group (x=1480.8, right offset 34 at 1792px).
 *
 * A page-local inline rule (`#gh-shell .tb-left { display:flex }`) outranks any
 * class-based selector, so .tb-left remained a real 217px flex box and split the
 * free space with the .tb-right stub — centring the group (x=778.4).
 *
 * This is a single ownership decision, so it is stated once, with the weight to
 * make it final: wrappers are contents-only, the group owns the auto margin.
 * ========================================================================== */
#gh-shell .topbar > .wrap > .tb-left,
#gh-shell .topbar > .wrap > .tb-right,
body:has(nav.nav) .topbar > .wrap > .tb-left,
body:has(nav.nav) .topbar > .wrap > .tb-right {
  display: contents !important;
  margin-left: 0 !important;
}
#gh-shell .topbar > .wrap > .tb-left > .gh-lang,
#gh-shell .topbar > .wrap > .gh-lang,
body:has(nav.nav) .topbar > .wrap > .tb-left > .gh-lang,
body:has(nav.nav) .topbar > .wrap > .gh-lang,
body:has(nav.nav) .topbar .gh-lang {
  margin-left: auto !important;
}

/* ============================================================================
 * TOP BAR HORIZONTAL INSET — the golden's 34px (22px under 820px)
 * ----------------------------------------------------------------------------
 * The shell's base rule `#gh-shell .topbar > .wrap { padding: 5px 24px }` outranks
 * the class-based override, so on the pages that still carried it the language
 * group's right offset measured 24 against the golden's 34 (Δ -10).
 * The golden's bar inset is 34px, narrowing to 22px below 820px.
 * ========================================================================== */
#gh-shell .topbar > .wrap,
body:has(nav.nav) .topbar > .wrap {
  padding-left: 34px !important;
  padding-right: 34px !important;
}
@media (max-width: 820px) {
  #gh-shell .topbar > .wrap,
  body:has(nav.nav) .topbar > .wrap {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

/* ============================================================================
 * NAV RIGHT-CONTROLS — shrinkable, like the golden (fixes 390px overflow)
 * ----------------------------------------------------------------------------
 * MEASURED at 390x844: the golden's .nav-right is `flex: 0 1 auto`, so the header
 * fits (right edge 374 inside a 390px viewport). On CN_DOG / CN_CAT the group is
 * `flex: 0 0 auto` — it cannot shrink — so the quote button was pushed past the
 * viewport (right 411.8 / 401.8). That is the horizontal overflow.
 *
 * The golden also uses a tighter bar on small screens: container padding 0 16px
 * and a 5px gap between the right-hand controls. Reproduced here, scoped to
 * <=560px so every wider breakpoint keeps the values verified above.
 * ========================================================================== */
#gh-shell .nav-right,
body:has(nav.nav) .nav-right {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
@media (max-width: 560px) {
  #gh-shell .nav > .wrap,
  body:has(nav.nav) .nav .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 5px !important;
  }
  #gh-shell .nav-right,
  body:has(nav.nav) .nav-right {
    gap: 5px !important;
  }
  #gh-shell .nav .btn,
  body:has(nav.nav) .nav .btn {
    padding-left: 11px !important;
    padding-right: 11px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  #gh-shell .brand,
  body:has(nav.nav) .brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
}

/* ============================================================================
 * BRAND — no min-width floor on small screens (matches the golden; fixes 390px)
 * ----------------------------------------------------------------------------
 * The shell's `.brand` carries a 169.2px min-width floor, so on a 390px viewport
 * it measured 221.8 wide against the golden's 160.3 — and the nav row overflowed
 * its own 390px container by 22–46px (the quote button and the right-controls
 * group extending past the edge). The golden's brand carries no floor and simply
 * shrinks. Removing the floor at <=560px lets the same layout algorithm fit.
 * ========================================================================== */
@media (max-width: 560px) {
  #gh-shell .brand,
  body:has(nav.nav) .brand,
  #gh-shell .nav > .wrap > .brand {
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }
  #gh-shell .nav-links,
  body:has(nav.nav) .nav-links {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #gh-shell .nav-right,
  body:has(nav.nav) .nav-right {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
}

/* ============================================================================
 * BRAND / NAV FLEX — ID-level weight, small screens only
 * ----------------------------------------------------------------------------
 * Shell pages carry an inline `#gh-shell .brand { min-width: … }`. An ID selector
 * outranks `body:has(nav.nav) .brand`, so the class-level override above did not
 * take effect and the nav row still overflowed its own 390px container by 22–46px
 * (the golden's brand has no min-width floor and simply shrinks).
 * Stated here with ID weight, scoped to <=560px.
 * ========================================================================== */
@media (max-width: 560px) {
  #gh-shell .brand,
  #gh-shell .nav > .wrap > .brand {
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }
  #gh-shell .nav-right {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  #gh-shell .nav,
  #gh-shell .nav > .wrap {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #gh-shell .nav .btn,
  #gh-shell .cn-shell-cta {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
}

/* ============================================================================
 * BRAND TAGLINE — hidden on small screens, like the golden (unscoped)
 * ----------------------------------------------------------------------------
 * The golden hides the tagline below its mobile breakpoint, leaving a 114.3px
 * wordmark block (brand total 160.3). The shell's own hide rule is scoped to
 * `#gh-shell`, but shell pages render their top bar OUTSIDE #gh-shell, so the
 * tagline stayed visible at 175.8 wide and the brand grew to 221.8 — which is
 * exactly the 22-46px by which the nav row overflowed its own 390px container.
 * Stated unscoped so it reaches every header shape.
 * ========================================================================== */
@media (max-width: 560px) {
  #gh-shell .gh-brand-tagline,
  body:has(nav.nav) .gh-brand-tagline,
  .nav .brand .gh-brand-tagline {
    display: none !important;
  }
}

/* ============================================================================
 * SMALL-SCREEN BRAND — ID weight (final)
 * ----------------------------------------------------------------------------
 * The pages that still overflow their 390px nav container (CN_HOME / CN_ABOUT
 * 46px, CN_DETAIL_* 22px) are exactly the ones carrying an inline lockup block;
 * the pages without it already fit. That block outranks class-level selectors, so
 * this states the small-screen rules at ID weight.
 *
 * Content: hide the tagline (the golden does, and it is the entire 61.5px brand
 * difference: wordmark measures 114.3 on both sides) and let the nav row's flex
 * children shrink instead of pinning a min-content floor.
 * ========================================================================== */
@media (max-width: 560px) {
  #gh-shell .gh-brand-tagline,
  #gh-shell .nav .brand .gh-brand-tagline,
  #gh-shell .brand > .gh-brand-copy > .gh-brand-tagline {
    display: none !important;
  }
  #gh-shell .gh-brand-copy {
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }
  #gh-shell .brand {
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }
  #gh-shell .nav-links { flex: 1 1 auto !important; min-width: 0 !important; }
  #gh-shell .nav-right { flex: 0 1 auto !important; min-width: 0 !important; }
  #gh-shell .nav-right > * { min-width: 0 !important; }
  #gh-shell .nav .btn,
  #gh-shell .cn-shell-cta { flex: 0 1 auto !important; min-width: 0 !important; }
  #gh-shell .nav > .wrap { min-width: 0 !important; }
}

/* ============================================================================
 * SMALL-SCREEN BRAND FIT — specificity raised above the baked inline block
 * ----------------------------------------------------------------------------
 * The baked inline lockup block declares (at !important)
 *     .brand > .gh-brand-copy > .gh-brand-tagline { display: block }
 * and is emitted in <head> AFTER this stylesheet, so an equal-specificity
 * !important rule loses on source order. Adding `:root` ahead of the same
 * descendant chain outranks it, which is what lets the golden's mobile brand
 * behaviour apply: the tagline is hidden and the brand fits the 390px row.
 * ========================================================================== */
@media (max-width: 560px) {
  :root .brand > .gh-brand-copy > .gh-brand-tagline { display: none !important; }
  :root .nav .brand > .gh-brand-copy > .gh-brand-tagline { display: none !important; }
  :root .brand > .gh-brand-copy { min-width: 0 !important; flex: 0 1 auto !important; }
  :root .brand { min-width: 0 !important; flex: 0 1 auto !important; }
  :root .nav-right { flex: 0 1 auto !important; min-width: 0 !important; }
  :root .nav-links { flex: 1 1 auto !important; min-width: 0 !important; }
  :root .nav .btn, :root .cn-shell-cta { flex: 0 1 auto !important; min-width: 0 !important; }
}

/* ============================================================================
 * TOP BAR COLOUR — the dark ground the design actually specifies
 * ----------------------------------------------------------------------------
 * MEASURED: this stylesheet declared `#gh-shell .topbar { background:#F5F5F7 }`.
 * On CN_CAT / cat-daily-supplies / cat-smart-living the ID selector outranked the
 * page's own `.topbar { background: var(--foot) }`, so those pages painted a
 * NEAR-WHITE bar. The language pills keep the golden's light text colour
 * (rgba(245,245,247,.82)), so EN and "More Languages" became white-on-near-white
 * and were invisible; only the blue ZH pill could be read.
 *
 * Every other CN page already computes #05070D here, and the EN golden's bar is
 * dark (rgb(42,50,63)). #gh-shell is the only lever that reaches the pages where
 * the page rule loses, so the dark ground is stated at that scope. --foot is the
 * page's own token (default #05070D), so pages that define it keep their exact
 * value and pages that do not get the intended dark bar.
 * ========================================================================== */
#gh-shell .topbar {
  background: var(--foot, #05070D);
}

/* ============================================================================
 * THE TWO HEADER LAYERS — aligned to the EN golden's own values
 * ----------------------------------------------------------------------------
 * LAYER 1 — LANGUAGE TOPBAR  (visual owner: this file, `#gh-shell .topbar`)
 *   Golden: background rgb(42,50,63) = #2A323F, no background-image, opacity 1,
 *   no backdrop-filter, no border, height 32.8px (5px 34px padding, 30px min).
 *   Already the case: EN golden and CN_HOME both compute rgb(42,50,63), and the
 *   top-bar pages use the page's own cream `.top-bar` ground which is their design.
 *
 * LAYER 2 — MAIN NAVIGATION  (visual owner: this file, `#gh-shell .nav`)
 *   The golden's palette, verbatim:
 *     light state  background rgba(245,245,247,.78)  backdrop-filter blur(18px)
 *                  border-bottom 1px solid rgba(0,0,0,.08)
 *     dark state   background linear-gradient(rgba(27,33,45,.7), rgba(29,36,49,.5))
 *                  backdrop-filter blur(20px) saturate(.88)
 *                  border-bottom 1px solid rgba(255,255,255,.06)
 *
 * MEASURED before this block, nav at scroll-top:
 *   CN_CAT   rgba(15,21,35,.86) + saturate(180%) blur(14px)
 *   CN_DOG   rgba(15,21,35,.72) + blur(18px)
 *   CN_PRIVACY var(--gh-bg)     + saturate(180%) blur(14px)
 *   EN/CN_HOME  golden gradient + blur(20px) saturate(.88)
 * i.e. three different nav palettes on one site. These declarations replace the
 * shell's own values with the golden's, so whichever rule wins the page renders
 * the golden palette. The scroll-driven dark state is untouched — it is driven by
 * the existing `dark` class, exactly as on the EN golden.
 * ========================================================================== */
#gh-shell .nav {
  background: rgba(245, 245, 247, .78);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
#gh-shell .nav.dark {
  background: linear-gradient(rgba(27, 33, 45, .7) 0%, rgba(29, 36, 49, .5) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(.88);
  backdrop-filter: blur(20px) saturate(.88);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* ============================================================================
 * NAV PALETTE — single owner, stated with the weight to make it one
 * ----------------------------------------------------------------------------
 * Several page templates declare the nav palette in an INLINE <style> block in
 * their own <head>, ahead of this stylesheet, so gh-shell.css lost on source
 * order at equal specificity. That is why the same site rendered three nav
 * palettes:
 *     EN golden / CN_HOME : linear-gradient(rgba(27,33,45,.7), rgba(29,36,49,.5))
 *                           + blur(20px) saturate(.88)
 *     CN_DOG  / detail    : rgba(15,21,35,.72) + blur(18px)
 *     CN_DOG detail       : rgba(35,42,54,.82) + blur(12px) saturate(140%)
 *     CN_CAT / CN_PRIVACY : rgba(15,21,35,.86) + saturate(180%) blur(14px)
 *
 * The competing page declarations are NOT !important, so this is the one place
 * that can legitimately own the value. It is a single shared statement, not a
 * per-page patch, and it copies the EN golden's numbers exactly.
 * ========================================================================== */
#gh-shell .nav,
body:has(nav.nav) .nav {
  background: rgba(245, 245, 247, .78) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
}
#gh-shell .nav.dark,
body:has(nav.nav) .nav.dark {
  background: linear-gradient(rgba(27, 33, 45, .7) 0%, rgba(29, 36, 49, .5) 100%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(.88) !important;
  backdrop-filter: blur(20px) saturate(.88) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}

/* ============================================================================
 * LAYER 1 — LANGUAGE TOPBAR: one ground for the whole site (the golden's)
 * ----------------------------------------------------------------------------
 * MEASURED before this rule:
 *     EN golden            rgb(42,50,63) = #2A323F
 *     CN_HOME / CN_ABOUT   rgb(42,50,63) = #2A323F
 *     CN_CAT / CN_DOG /
 *     all detail pages     rgb(5,7,13)   = #05070D   <-- split by page family
 * The split came from the shell using `var(--foot)`, which is #05070D on the dark
 * preview/detail pages and #2A323F elsewhere. The EN golden has ONE top-bar
 * ground, so this states exactly that value once, at the shared owner. The
 * competing page declaration is `background: var(--foot)` (no !important).
 * ========================================================================== */
#gh-shell .topbar,
body:has(nav.nav) .topbar {
  background: rgb(42, 50, 63) !important;
}

/* ============================================================================
 * LAYER 1 — TOPBAR GROUND (reaches the detail pages too)
 * ----------------------------------------------------------------------------
 * MEASURED: dog-product-detail-v8-b2b.php / cat-product-detail-v8-b2b.php do NOT
 * load this stylesheet, so the `#gh-shell` / `body:has()` rule above cannot reach
 * them; they computed topbar rgb(5,7,13) against the golden's rgb(42,50,63).
 * This is the same single value, stated in a form that reaches every CN page.
 * ========================================================================== */
.topbar {
  background: rgb(42, 50, 63) !important;
}

/* ============================================================================
 * LANGUAGE PILLS — follow the nav's LIGHT state
 * ----------------------------------------------------------------------------
 * MEASURED on the pages whose nav computes the LIGHT palette
 * (cat-daily-supplies, privacy.html): the pills kept the dark-state light colour
 * rgba(245,245,247,.82) on a rgba(245,245,247,.78) nav, i.e. contrast 1.0 —
 * EN and "More Languages" were invisible.
 *
 * The EN golden pairs its light nav with dark controls: its own scrolled `.nav`
 * rule sets `color:#1D1D1F`, which the links inherit. The CN pages declare the
 * light nav without that colour. This applies the golden's dark-control treatment
 * to the pills whenever the nav is in its light state. Pill markup, geometry,
 * routes and labels are untouched — only the colours.
 * ========================================================================== */
.nav:not(.dark) .gh-lang a,
.nav:not(.dark) .gh-lang .gh-lang-more > button,
.nav:not(.dark) .gh-lang-slot .gh-lang a,
.nav:not(.dark) .gh-lang-slot .gh-lang-more > button {
  color: rgba(29, 29, 31, .82) !important;
  border-color: rgba(0, 0, 0, .22) !important;
}
.nav:not(.dark) .gh-lang a:hover,
.nav:not(.dark) .gh-lang .gh-lang-more > button:hover {
  color: #1D1D1F !important;
}
.nav:not(.dark) .gh-lang a.on,
.nav:not(.dark) .gh-lang a[aria-current="true"] {
  background: #0071E3 !important;
  border-color: #0071E3 !important;
  color: #fff !important;
}

/* ============================================================================
 * LANGUAGE PILLS — light-nav state (corrected selector)
 * ----------------------------------------------------------------------------
 * The previous attempt used `.nav:not(.dark) .gh-lang a`, which matches NOTHING:
 * MEASURED, `.gh-lang` is always a direct child of `.topbar` and `.nav` is never an
 * ancestor of it. On the two pages whose nav computes the LIGHT palette
 * (cat-daily-supplies, privacy.html) the pills therefore stayed
 * rgba(245,245,247,.82) on a rgba(245,245,247,.78) ground — contrast 1.0, invisible.
 *
 * The EN golden pairs its light nav with dark controls (its own scrolled `.nav`
 * rule sets color:#1D1D1F, which the links inherit). This states that treatment
 * for the light case using a selector that reaches the pills. The dark case keeps
 * the golden's light pill colours, exactly as before.
 *
 * Pill markup, geometry, routes and labels are untouched — colours only.
 * ========================================================================== */
/* CN-PILL-VISIBILITY-ROOT-FIX-V1: removed the light-bar pill override that assumed a light topbar.
 * The topbar ground is the golden's DARK rgb(42,50,63), so that override painted
 * near-black text on a dark bar (contrast 1.25:1 on 65 pages). The switcher's own
 * base rule (.gh-lang a/button { color: rgba(245,245,247,.82) }) is correct for the
 * dark bar and is restored by this removal. */