/* ============================================================================
   navfoot.css — header / nav / language switcher / footer      (2026-10-10)

   Enqueued AFTER atlas.css on purpose. Every selector is scoped to
   `body.gera .gera-top` or `body.gera .gera-foot` so it outranks the older
   `body.gera .gera-nav a` / `body.gera .gera-foot a` rules in design.css
   (which are (0,2,2) and would otherwise win over a (0,2,1) class selector).

   Rollback = dequeue the 'gera-navfoot' handle in functions.php, or delete
   this file + assets/nav.js.

   What changed vs the 2026-10-09 shell:
     · header: 6 flat links + EN/ES/DE/FR inline  ->  5 items (2 with panels) + 1 language pill
     · nav panels: hover / :focus-within on desktop (zero JS);
       caret button + .is-open on <=1024px (assets/nav.js)
     · language: 4 inline chips -> 1 pill + dropdown of full names
     · footer: brand block + balanced 3 columns + "Source by category" (28) + 1-line colophon
     · hamburger breakpoint 1280px -> 1024px (the narrower bar now fits)
   ============================================================================ */

/* ── header shell ───────────────────────────────────────────────────────── */
body.gera .gera-top { background: var(--paper); }
body.gera .gera-top .gera-wrap { height: 70px; gap: var(--s3); }
body.gera .gera-top .gera-brand { font-size: 18px; }

/* ── primary nav ────────────────────────────────────────────────────────── */
body.gera .gera-top .gera-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
body.gera .gera-top .gera-nav .gera-nav__l,
body.gera .gera-top .gera-nav .gera-dd__t {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 13px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; white-space: nowrap; border-bottom: 0;
}
body.gera .gera-top .gera-nav .gera-nav__l:hover,
body.gera .gera-top .gera-nav .gera-dd__t:hover,
body.gera .gera-top .gera-nav .gera-dd:hover > .gera-dd__t,
body.gera .gera-top .gera-nav .gera-dd:focus-within > .gera-dd__t,
body.gera .gera-top .gera-nav .gera-dd.is-open > .gera-dd__t {
  background: var(--paper-3); color: var(--ink); text-decoration: none;
}
body.gera .gera-top .gera-nav .gera-dd { position: relative; }
body.gera .gera-top .gera-nav .gera-dd__t i {
  width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s ease;
}
body.gera .gera-top .gera-nav .gera-dd:hover > .gera-dd__t i,
body.gera .gera-top .gera-nav .gera-dd:focus-within > .gera-dd__t i { transform: rotate(-135deg); margin-top: 3px; }
body.gera .gera-top .gera-nav .gera-dd__b { display: none; }

/* ── nav panel ──────────────────────────────────────────────────────────── */
body.gera .gera-top .gera-nav .gera-dd__p {
  position: absolute; top: 54px; left: -8px; z-index: 70;
  display: none; min-width: 236px; padding: 22px 24px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 20px 44px -20px rgba(11, 20, 22, .30);
}
/* 🔴 Measured on the live site (2026-10-10, 1025px): anchored to the trigger
   (`left:-190px` on a 1020px panel) the category panel ran to x=1069 and gave the
   whole document a 44px horizontal scrollbar. The panel is now positioned against
   the header bar, centred, and never wider than the content column.
   `.gera-dd--wide` is emitted by header.php only for the category panel, so the
   two small panels keep sitting directly under their own trigger. */
@media (min-width: 1025px) {
  body.gera .gera-top .gera-nav .gera-dd--wide { position: static; }
  body.gera .gera-top .gera-nav .gera-dd__p--wide {
    left: 50%; transform: translateX(-50%);
    width: calc(100% - 40px); max-width: 1240px; min-width: 0; top: 70px;
  }
}
/* the rightmost dropdown must open to the LEFT, or a 236px panel hangs off the
   right edge of the viewport (measured on /: "About" at 1440 put the panel at
   x=1508 in a 1440 viewport). */
body.gera .gera-top .gera-nav > .gera-dd:last-of-type .gera-dd__p { left: auto; right: -8px; }
/* 🔴 Panel opening on hover / :focus-within is DESKTOP ONLY.
   On touch, the caret button keeps focus after being tapped, so :focus-within
   would hold the panel open even after .is-open is removed (measured: the
   language panel stayed open on top of the open hamburger menu). */
@media (min-width: 1025px) {
  body.gera .gera-top .gera-nav .gera-dd:hover > .gera-dd__p,
  body.gera .gera-top .gera-nav .gera-dd:focus-within > .gera-dd__p { display: block; }
}
body.gera .gera-top .gera-nav .gera-dd.is-open > .gera-dd__p { display: block; }

body.gera .gera-top .gera-nav .gera-dd__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
body.gera .gera-top .gera-nav .gera-dd__g { min-width: 0; }
body.gera .gera-top .gera-nav .gera-dd__gh {
  margin: 0 0 10px; font-family: var(--font-num); font-size: 11.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
}
body.gera .gera-top .gera-nav .gera-dd__l { margin: 0; padding: 0; list-style: none; }
body.gera .gera-top .gera-nav .gera-dd__l li { margin: 0; }
body.gera .gera-top .gera-nav .gera-dd__l a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 5px 0; font-size: 15px; font-weight: 400; color: var(--ink-2);
  text-decoration: none; border-bottom: 1px solid transparent;
}
body.gera .gera-top .gera-nav .gera-dd__l a:hover { color: var(--accent); border-bottom-color: var(--line); }
body.gera .gera-top .gera-nav .gera-dd__l b {
  font-family: var(--font-num); font-size: 11.5px; font-weight: 400; color: var(--muted);
}
body.gera .gera-top .gera-nav .gera-dd__l--plain a { justify-content: flex-start; padding: 6px 0; }
body.gera .gera-top .gera-nav .gera-dd__hubs {
  display: flex; gap: 22px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}
body.gera .gera-top .gera-nav .gera-dd__hubs a {
  font-size: 15px; font-weight: 400; color: var(--muted); text-decoration: none; padding: 0;
  border-bottom: 0;
}
body.gera .gera-top .gera-nav .gera-dd__hubs a:first-child { color: var(--accent); font-weight: 600; }
body.gera .gera-top .gera-nav .gera-dd__hubs a:hover { color: var(--accent); }

/* ── header right cluster + language pill ───────────────────────────────── */
body.gera .gera-top .gera-topright {
  display: flex; align-items: center; gap: 14px;
  margin-left: 14px; padding-left: 16px; border-left: 1px solid var(--line);
}
/* 🔴 2026-10-13 (BUYER_FIX_1013 / P1-3)：顶栏搜索入口。
   44×44（触摸目标下限），图标 18px，颜色跟 body 走 —— 与语言胶囊同一档视觉重量。 */
body.gera .gera-top .gera-topsearch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--muted); background: transparent;
}
body.gera .gera-top .gera-topsearch:hover,
body.gera .gera-top .gera-topsearch:focus-visible {
  border-color: var(--line-2); color: var(--ink); text-decoration: none;
}
body.gera .gera-top .gera-topsearch svg { display: block; }
body.gera .gera-top .gera-lang { position: relative; display: block; }
body.gera .gera-top .gera-lang__c {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: none; cursor: pointer; appearance: none; -webkit-appearance: none;
  font-family: var(--font-num); font-size: 11.5px; font-weight: 500; letter-spacing: .07em;
  color: var(--ink-2);
}
body.gera .gera-top .gera-lang__c:hover { border-color: var(--line-2); color: var(--ink); }
body.gera .gera-top .gera-lang__c i {
  width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
}
body.gera .gera-top .gera-lang__p {
  position: absolute; top: 40px; right: 0; z-index: 70;
  display: none; min-width: 200px; padding: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 20px 44px -20px rgba(11, 20, 22, .30);
}
@media (min-width: 1025px) {
  body.gera .gera-top .gera-lang:hover .gera-lang__p,
  body.gera .gera-top .gera-lang:focus-within .gera-lang__p { display: block; }
}
body.gera .gera-top .gera-lang.is-open .gera-lang__p { display: block; }
body.gera .gera-top .gera-lang__p a,
body.gera .gera-top .gera-lang__p .gera-lang__on {
  display: block; padding: 8px 10px; border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: 15px; font-weight: 400;
  letter-spacing: 0; color: var(--ink-2); text-decoration: none; background: none;
}
body.gera .gera-top .gera-lang__p a:hover { background: var(--paper-3); color: var(--accent-deep); text-decoration: none; }
body.gera .gera-top .gera-lang__p .gera-lang__on {
  background: var(--accent-wash); color: var(--accent-deep); font-weight: 600;
}

/* ── footer ─────────────────────────────────────────────────────────────── */
body.gera .gera-foot { background: var(--paper-2); padding: 56px 0 30px; }

/* 🔴 2026-10-12 (UX_FIX_1012 · audit P0-3). The whole footer sits on --paper-2
   (#EFEBE4). --accent on that band is 4.22:1 — below AA for the 11.5–19px text
   used here. Measured failures: the "Sourcing" half of the wordmark (19px), the
   "Source by category" heading (11.5px), the first hub link, and every teal link
   inside the category block. --accent-deep is 6.29:1 on the same band and reads
   as a deeper, more deliberate teal, so the teal in the footer becomes a shade
   rather than a hue change. Every teal declaration below is therefore
   --accent-deep; hover states included.
   (`.gera-fcontact a` stays on --muted: #5A686D on #EFEBE4 is 4.86:1 and passes.) */
body.gera .gera-foot .gera-ftop { display: grid; grid-template-columns: minmax(250px, 1fr) 2.1fr; gap: 56px; }
/* 2026-10-12: 列标题由 h4 改 h3（axe heading-order），选择器同步；保留 h4 以防回归 */
body.gera .gera-foot .gera-fhead h4,
body.gera .gera-foot .gera-fhead h3 { font-size: 11.5px; margin: 0; }
body.gera .gera-foot .gera-flogo {
  margin: 0 0 12px; font-size: 19px; font-weight: 600; letter-spacing: -.022em; color: var(--ink);
}
body.gera .gera-foot .gera-flogo span { color: var(--accent-deep); }
body.gera .gera-foot .gera-fdesc { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.62; color: var(--body); }
body.gera .gera-foot .gera-fcta {
  display: inline-flex; align-items: center; justify-content: center; width: auto;
  margin: 18px 0 0; height: 44px; padding: 0 22px;
}
/* design.css has `body.gera .gera-foot a { color: var(--body) }` — (0,2,2) — which
   beats .gera-btn's white and turns the teal button into dark-on-teal. */
body.gera .gera-foot a.gera-fcta { color: #fff; font-size: 15px; font-weight: 600; }
body.gera .gera-foot a.gera-fcta:hover { color: #fff; }
body.gera .gera-foot .gera-fcontact { margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
body.gera .gera-foot .gera-fcontact a {
  display: inline-block; margin: 0; padding: 6px 0; color: var(--muted);
  font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--line);
}
body.gera .gera-foot .gera-fcontact a:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }

body.gera .gera-foot .gera-fnav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
body.gera .gera-foot .gera-fcol { display: block; }
body.gera .gera-foot .gera-fcol > a {
  display: block; margin: 0; padding: 5px 0; font-size: 15px; color: var(--ink-2);
  text-decoration: none; border-bottom: 1px solid transparent;
}
body.gera .gera-foot .gera-fcol > a:hover { color: var(--accent-deep); border-bottom-color: var(--line); }

body.gera .gera-foot .gera-fcat {
  display: block; margin-top: 52px; padding-top: 36px; border-top: 1px solid var(--line);
}
body.gera .gera-foot .gera-fcathead { margin-bottom: 20px; }
body.gera .gera-foot .gera-fcathead { list-style: none; cursor: default; }
body.gera .gera-foot .gera-fcathead::-webkit-details-marker { display: none; }
body.gera .gera-foot .gera-fcathead i { display: none; }
body.gera .gera-foot .gera-fcathey {
  margin: 0; font-family: var(--font-num); font-size: 11.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent-deep);
}
body.gera .gera-foot .gera-fcats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 36px; }
body.gera .gera-foot .gera-fcatg { min-width: 0; }
body.gera .gera-foot .gera-fcath {
  margin: 0 0 8px; font-family: var(--font-num); font-size: 11.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
body.gera .gera-foot .gera-fcatl { margin: 0; padding: 0; list-style: none; }
body.gera .gera-foot .gera-fcatl li { margin: 0; }
body.gera .gera-foot .gera-fcatl a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0; padding: 4px 0; font-size: 15px; color: var(--ink-2);
  text-decoration: none; border-bottom: 1px solid transparent;
}
body.gera .gera-foot .gera-fcatl a:hover { color: var(--accent-deep); border-bottom-color: var(--line); }
body.gera .gera-foot .gera-fcatl b { font-family: var(--font-num); font-size: 11.5px; font-weight: 400; color: var(--muted); }
body.gera .gera-foot .gera-fhubrow {
  display: flex; gap: 22px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
}
body.gera .gera-foot .gera-fhubrow a { display: inline; margin: 0; font-size: 15px; color: var(--muted); text-decoration: none; }
body.gera .gera-foot .gera-fhubrow a:first-child { color: var(--accent-deep); font-weight: 600; }
body.gera .gera-foot .gera-fhubrow a:hover { color: var(--accent-deep); }

body.gera .gera-foot .gera-colophon {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line);
}
body.gera .gera-foot .gera-colophon p { margin: 0; font-size: 15px; color: var(--muted); }
body.gera .gera-foot .gera-colophon a { display: inline; margin: 0; font-size: 15px; color: var(--muted); text-decoration: none; }
body.gera .gera-foot .gera-colophon a:hover { color: var(--accent-deep); }
body.gera .gera-foot .gera-colophon__c { margin-left: 16px; }

/* ── 1025–1159px: tighter bar so the horizontal nav still fits ──────────── */
@media (min-width: 1025px) and (max-width: 1159px) {
  body.gera .gera-top .gera-wrap { gap: var(--s2); }
  body.gera .gera-top .gera-nav .gera-nav__l,
  body.gera .gera-top .gera-nav .gera-dd__t { padding: 0 10px; font-size: 15px; }
  body.gera .gera-top .gera-topright { margin-left: 10px; padding-left: 12px; gap: 10px; }
}

/* ── <=1024px: hamburger menu ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* 🔴 44×44 touch targets (2026-10-06 audit: 40×40 and a 32px-tall pill were
     the two header controls under the guideline). */
  body.gera .gera-top .gera-menu-b {
    display: flex; order: 3; width: 44px; height: 44px;
    /* 🔴 2026-10-12 (UX_FIX_1012): without flex-basis the hamburger was squeezed
       by the other header items — measured 30x44 at 320px, i.e. under the 44px
       touch target the rest of this block is built around. */
    flex: 0 0 44px;
    align-items: center; justify-content: center; cursor: pointer;
    margin-left: var(--s1); border: 1px solid var(--line); border-radius: var(--r-sm);
  }
  body.gera .gera-top .gera-menu-b span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
  body.gera .gera-top .gera-menu-b span::before,
  body.gera .gera-top .gera-menu-b span::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink);
  }
  body.gera .gera-top .gera-menu-b span::before { top: -6px; }
  body.gera .gera-top .gera-menu-b span::after  { top:  6px; }

  body.gera .gera-top .gera-brand { margin-right: auto; }
  body.gera .gera-top .gera-topright { order: 2; margin: 0; padding: 0; border: 0; }
  body.gera .gera-top .gera-top-cta { display: none; }

  body.gera .gera-top .gera-nav {
    display: none; position: absolute; top: 70px; left: 0; right: 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0; margin-left: 0;
    background: var(--paper); padding: 10px 20px 22px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2);
    max-height: calc(100vh - 70px); overflow: auto;
  }
  body.gera .gera-top .gera-menu-t:checked ~ .gera-nav { display: flex; }

  body.gera .gera-top .gera-lang__c { height: 44px; padding: 0 12px; }
  body.gera .gera-top .gera-nav .gera-nav__l,
  body.gera .gera-top .gera-nav .gera-dd__t {
    height: auto; width: 100%; padding: 13px 0; border-radius: 0;
    border-bottom: 1px solid var(--line); font-size: 17px; color: var(--ink); background: none;
  }
  body.gera .gera-top .gera-nav .gera-nav__l:hover,
  body.gera .gera-top .gera-nav .gera-dd__t:hover,
  body.gera .gera-top .gera-nav .gera-dd:hover > .gera-dd__t,
  body.gera .gera-top .gera-nav .gera-dd:focus-within > .gera-dd__t { background: none; color: var(--ink); }

  body.gera .gera-top .gera-nav .gera-dd { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  body.gera .gera-top .gera-nav .gera-dd__t { border-bottom: 0; }
  body.gera .gera-top .gera-nav .gera-dd__b {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; background: none; border: 0; cursor: pointer;
  }
  body.gera .gera-top .gera-nav .gera-dd__b::after {
    content: ""; width: 7px; height: 7px; margin-top: -3px;
    border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg);
  }
  body.gera .gera-top .gera-nav .gera-dd.is-open .gera-dd__b::after { transform: rotate(-135deg); margin-top: 3px; }

  body.gera .gera-top .gera-nav .gera-dd__p,
  body.gera .gera-top .gera-nav .gera-dd__p--wide {
    position: static; display: none; grid-column: 1 / -1;
    min-width: 0; left: auto; right: auto; top: auto; width: auto;
    transform: none; padding: 0 0 14px 14px;
    background: none; border: 0; box-shadow: none;
  }
  body.gera .gera-top .gera-nav .gera-dd.is-open > .gera-dd__p { display: block; }
  body.gera .gera-top .gera-nav .gera-dd__cols { grid-template-columns: 1fr; gap: 16px; }
  body.gera .gera-top .gera-nav .gera-dd__hubs { flex-direction: column; gap: 8px; }

  body.gera .gera-top .gera-nav .gera-nav-cta {
    display: inline-flex; justify-content: center; margin-top: 14px;
  }
  /* design.css `body.gera .gera-nav a { color: var(--body) }` (0,2,2) outranks
     .gera-btn's white → the menu CTA rendered dark-on-teal. Pre-existing bug. */
  body.gera .gera-top .gera-nav a.gera-nav-cta { color: #fff; border-bottom: 0; font-size: 15px; }
  body.gera .gera-top .gera-nav a.gera-nav-cta:hover { color: #fff; }

  /* 🔴 2026-10-10: the language switcher does NOT go into the menu any more.
     The trigger is a real <button> now (focusable, tappable) and stays visible
     and usable in the header's top-right at <=1024px — a second 4-row list
     inside the menu would be pure duplication. */
  body.gera .gera-top .gera-nav-lang { display: none; }

  /* footer stacks */
  body.gera .gera-foot .gera-ftop { grid-template-columns: 1fr; gap: 36px; }
  body.gera .gera-foot .gera-fnav { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  body.gera .gera-foot .gera-fcats { grid-template-columns: repeat(2, 1fr); gap: 20px 28px; }
  body.gera .gera-foot .gera-colophon { flex-direction: column; gap: 8px; }
  body.gera .gera-foot .gera-colophon__c { margin-left: 0; }
}

@media (max-width: 720px) {
  body.gera .gera-foot .gera-fnav { grid-template-columns: 1fr; gap: 0; }
  body.gera .gera-foot .gera-fcats { grid-template-columns: 1fr; gap: 18px; }
  body.gera .gera-foot .gera-fhubrow { flex-direction: column; gap: 8px; }
  /* the category block is a <details> too: on phones it starts collapsed, so the
     28 rows do not push the footer back to ~1.8 screens */
  body.gera .gera-foot .gera-fcat { margin-top: 0; padding-top: 0; border-top: 0; }
  body.gera .gera-foot .gera-fcathead {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: 15px 0; border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line); cursor: pointer;
  }
  body.gera .gera-foot .gera-fcathead i {
    display: block; position: relative; width: 12px; height: 12px;
  }
  body.gera .gera-foot .gera-fcathead i::before,
  body.gera .gera-foot .gera-fcathead i::after {
    content: ""; position: absolute; background: var(--muted);
  }
  body.gera .gera-foot .gera-fcathead i::before { left: 0; top: 5px; width: 12px; height: 2px; }
  body.gera .gera-foot .gera-fcathead i::after { left: 5px; top: 0; width: 2px; height: 12px; }
  body.gera .gera-foot .gera-fcat[open] .gera-fcathead i::after { display: none; }
  body.gera .gera-foot .gera-fcat[open] .gera-fcathead { border-bottom: 0; }
  body.gera .gera-foot .gera-fcat > .gera-fcats { padding-top: 18px; }
}

@media (max-width: 480px) {
  body.gera .gera-top .gera-brand { font-size: 16px; }
}

/* 🔴 2026-10-12 (UX_FIX_1012): 320px（最窄的在用手机宽）实测门头差 6px 放不下：
   品牌 140 + 语言胶囊 54 + 汉堡 44 + 两个 24px 间距 = 286 > 内容宽 280。
   原来靠把汉堡挤到 30px 勉强塞进去 —— 那又破坏了 44px 触控目标。
   窄屏单独收紧：间距 24 → 12，品牌 16 → 15px（144 → ~131px），
   44px 汉堡就能完整放下（131+12+54+12+44 = 253 ≤ 280）。 */
@media (max-width: 360px) {
  body.gera .gera-top .gera-wrap { gap: 12px; }
  body.gera .gera-top .gera-brand { font-size: 15px; }
}

/* ── 2026-10-12 MOBILE TAP TARGETS（页脚 / 导航 / 语言胶囊）─────────────────
   实测 390px 真实浏览器：
     页脚 support@ / WhatsApp          37px
     页脚栏目链接（Product sourcing…）  35px
     "All 28 categories with counts"    24px
     顶部导航项 / 面板触发              36px
     语言胶囊 EN                        32px
     品牌字标                           29px
   全部抬到 44px。只加最小高度 + 让它们成为 flex 容器居中，不改字号、不改颜色、
   不改间距语义；桌面端完全不受影响（整块在 ≤768px 内）。 */
@media (max-width: 768px) {
  body.gera .gera-fcontact a,
  body.gera .gera-fnav details a,
  body.gera .gera-fcat > div > a,
  body.gera .gera-fcatl li a,
  body.gera .gera-nav__l,
  body.gera .gera-dd__t,
  body.gera .gera-lang__c { display: inline-flex; align-items: center; min-height: 44px; }
  /* 🔴 2026-10-22：`.gera-brand` 从这个列表里**单独拿掉**。
     原因：它用 inline-flex 时，「Golden Era」与「Sourcing」之间的空格会被吃掉 ——
     文本节点成了匿名 flex item，而 flex item 会剥掉首尾空白。
     （注意 .gera-wrap 本身是 flex 容器，所以这里写的 inline-flex 会被**块化成
       flex**，实测 getComputedStyle().display 就是 "flex" —— 正是元凶。）
     实测 768px：文字段宽 88px ≈「GoldenEra」的 87px，而不是「Golden Era 」的 96px
     → 门头真的渲染成 `GoldenEraSourcing`。
     design.css 的 ≤720 那条早用 `inline-block + line-height` 修过同一个 bug
     （2026-10-12 P0-2），但它的断点是 720，**管不到 721–768 这一段** ——
     这里补上，两个断点口径一致。 */
  body.gera .gera-top .gera-brand { display: inline-block; min-height: 44px; line-height: 44px; }
  /* 页脚三列的 <summary> 也是可点物 */
  body.gera .gera-fcat > summary { min-height: 44px; display: flex; align-items: center; }
}

/* ── 2026-10-12（axe-core target-size, serious）：页脚列标题的 <summary> ────
   桌面端实测 225×15px —— 低于 WCAG 2.2 AA 的 24×24。
   （它桌面端是 pointer-events:none 的装饰件，但 axe 仍按可点目标算；
     手机端它真的是手风琴控件，实测已 48px。）
   处置：桌面给 24px 最小高度、flex 居中；手机端本来就是 48px，不受影响。
   ⚠️ 两处边界都踩过，记下来：
      ① 写成**无条件**规则 + 位置在文件末尾 → 把手机端原本 48px 的触摸目标压回 24px
         （同权重、更晚 = 赢）。
      ② 改成 `min-width: 769px` → **721–768px 掉进空档**：那个区间页脚已经是桌面模式
         （design.css 用 `min-width: 721px` 关掉了手风琴交互），但我的规则没生效，
         实测 768px 仍是 15.2px，axe 在 14 页报 `target-size`。
      正确边界 = 跟页脚自己的断点对齐：**721px**（≤720 手机 48px / ≥721 桌面 24px，无缝）。 */
@media (min-width: 721px) {
  body.gera .gera-foot .gera-fhead { min-height: 24px; display: flex; align-items: center; }
}

/* ── 2026-10-12：页脚 colophon 两个链接的触摸目标 ──────────────────────────
   ⚠️ 必须在 navfoot.css 里写、且选择器要到 (0,3,1) —— 上面第 237 行的
   `body.gera .gera-foot .gera-colophon a { display: inline }` 是同权重且更晚的规则，
   写在 atlas.css 里会被它压掉（实测 display 仍 inline / min-height 0）。 */
@media (max-width: 768px) {
  body.gera .gera-foot .gera-colophon__r a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* 🔴 2026-10-13 (BUYER_FIX_1013 / P1-3)：顶栏加了 44px 搜索入口。
   1025–1200 这一段「横向导航 + 品牌全称 + 语言胶囊 + CTA」本来就只剩几十像素余量，
   实测 1025px 时右侧簇右缘 1044 > 视口 1025（溢出 19px，出现横向滚动条）。
   只在这一段收紧：导航项内边距 26→16px（5 项省 50px）、右簇间距 30→22px。
   字号、断点、任何可见元素都不动 —— 1201px 以上保持原样。 */
@media (min-width: 1025px) and (max-width: 1200px) {
  body.gera .gera-top .gera-nav .gera-nav__l,
  body.gera .gera-top .gera-nav .gera-dd__t { padding: 0 8px; }
  body.gera .gera-top .gera-topright { gap: 10px; margin-left: 10px; padding-left: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔴 2026-10-22 · 门头品牌锁版（官方 logo 原样 + 照原图的字形系统）
   ───────────────────────────────────────────────────────────────────────────
   第一版错在三点，用户原话：「图标 logo 很小，后面的字又挺大的，感觉很违和，
   和我发给你的图片不太一样」：
     ① 标 34px 太小 —— 原图里标是绝对主角（标 : 行1 : 行2 帽高 ≈ 9.5 : 2.2 : 1）
     ② 「Golden Era」用了站点正文字体（无衬线），原图是**衬线体** ← 最要命的一条
     ③ 没大写、没宽字距，等于打了一行字
   现在：标 52px 当主角 + 衬线大写 GOLDEN ERA + 无衬线大写 SOURCING AGENT，
   字色用 logo 自己的墨蓝 --ink-brand（从用户原图取色 #01122F）。
   **logo 本体外观一字未改**，改的只是尺寸与它旁边那两行字怎么排。

   🔴 排版上两个硬约束（都踩过）：
   1) img 必须 `display:inline-block`。门头 <a class="gera-brand"> 在桌面档计算值是
      display:block（.gera-wrap 是 flex 容器，把 inline 子项块化了）。里面放
      display:block 的 img = 插一个块级盒 → **强制换行**，标跑到文字上一行
      （首版实测 brand 盒 162×58 = 两行）。
   2) **不能**把 <a> 改成 flex 来做"两行字标" —— ≤720px 那条
      `display:inline-block; line-height:44px`（2026-10-12 P0-2 修
      「GoldenEraSourcing」空格丢失）依赖 <a> 保持行内格式化上下文。
      所以两行用**块级 span** 自己叠，不用 flex。
   ═══════════════════════════════════════════════════════════════════════════ */
body.gera .gera-top .gera-brand__mark {
  width: 52px; height: auto; flex: none;
  display: inline-block; vertical-align: middle;
  margin: 0 14px 0 0;
}
body.gera .gera-top .gera-brand__wm {
  display: inline-block; vertical-align: middle; white-space: nowrap;
}
/* 行1：衬线大写 + 宽字距 —— 这是「设计过」和「打了一行字」的分界。
   字色显式写 --ink-brand：design.css 有一条 `body.gera .gera-top .gera-brand span`
   会把所有 span 染成青绿（原本是给「Sourcing」上色的），这里必须压过它。 */
body.gera .gera-top .gera-brand .gera-brand__l1 {
  display: block; font-family: var(--font-serif); font-weight: 600;
  font-size: 14.5px; letter-spacing: .10em; text-transform: uppercase;
  line-height: 1.16; color: var(--ink-brand);
}
/* 行2：无衬线大写，更小更开 —— 原图里它是"描述行" */
body.gera .gera-top .gera-brand .gera-brand__l2 {
  display: block; font-family: var(--font-sans); font-weight: 500;
  font-size: 9.5px; letter-spacing: .20em; text-transform: uppercase;
  line-height: 1.5; margin-top: 1px; color: var(--ink-brand);
}
/* 🔴 紧凑档的断点是 **1099**，不是 1024 ——
   1025–1099 这一段走的是"横向导航"（汉堡键要 ≥1025 才收起），门头本来就满载：
   实测 1025px 用 52px 大锁版溢出 18px，换成这一档（标 44 / 字 13+8.5，品牌宽 154
   而不是 179）就归零。断点跟汉堡键不同是**故意**的：汉堡键 1024 是导航的断点，
   锁版 1099 是"门头还放不放得下大字标"的断点，两者本来就该分开。 */
@media (max-width: 1099px) {
  body.gera .gera-top .gera-brand__mark { width: 44px; margin-right: 12px; }
  body.gera .gera-top .gera-brand .gera-brand__l1 { font-size: 13px; }
  body.gera .gera-top .gera-brand .gera-brand__l2 { font-size: 8.5px; letter-spacing: .18em; }
}
@media (max-width: 480px) {
  body.gera .gera-top .gera-brand__mark { width: 38px; margin-right: 10px; }
  body.gera .gera-top .gera-brand .gera-brand__l1 { font-size: 11.5px; letter-spacing: .09em; }
  body.gera .gera-top .gera-brand .gera-brand__l2 { font-size: 8px; letter-spacing: .16em; }
}
/* 🔴 ≤384px：门头（锁版 + 搜索 + 语言胶囊 + 汉堡）在这段开始贴边。
   实测：用 ≤480 那一档（标 38 / 间距 10）时 340px 溢出 5px、320px 溢出 25px。
   所以再收一档：标 38→30、间距 10→6，并把门头 wrap 间距 12→8。
   两行字标这时比旧的单行文字品牌**更窄**（89px vs 122px），是这次改版白捡的余量。 */
@media (max-width: 384px) {
  body.gera .gera-top .gera-brand__mark { width: 30px; margin-right: 6px; }
  body.gera .gera-top .gera-wrap { gap: 8px; }
}
/* 🔴 ≤336px：**标放不下，藏起来**（品牌名仍在，只是不带标）。
   320px 实测：门头四件（两行字标 89 + 搜索 44 + 语言胶囊 53 + 汉堡 44）+ 两侧 40px
   内边距 + 两个 8px 间距 = 306px 起，再加 30px 的标就是 336 —— 320 塞不进。
   判据依旧是「藏装饰件、不降级功能件」：标是装饰（alt=""，品牌名就在紧邻文字里），
   搜索与语言是功能。代价：≤336px 门头比今天多两行小字、没有标，**不溢出**。 */
@media (max-width: 336px) {
  body.gera .gera-top .gera-brand__mark { display: none; }
}


/* ── 页脚品牌锁版（2026-10-22）───────────────────────────────────────────────
   页脚原来只有一行青绿纯文字 `.gera-flogo`，跟门头的「标 + 衬线大写 GOLDEN ERA +
   无衬线大写 SOURCING AGENT」不是一套 → 同一个页面上下两个品牌长相不同。
   现在页脚用同一个锁版，只是小一号：标 40px / 行1 13px / 行2 8.5px。
   排版约束同门头：img 必须 inline-block，两行用块级 span 叠（不用 flex）。 */
body.gera .gera-foot .gera-flogo {
  display: flex; align-items: center; gap: 11px;
  font-size: inherit; letter-spacing: normal; color: var(--ink-brand);
}
body.gera .gera-foot .gera-flogo__mark {
  width: 40px; height: auto; flex: none;
  display: inline-block; vertical-align: middle;
}
body.gera .gera-foot .gera-flogo__wm {
  display: inline-block; vertical-align: middle; white-space: nowrap;
}
body.gera .gera-foot .gera-flogo .gera-flogo__l1 {
  display: block; font-family: var(--font-serif); font-weight: 600;
  font-size: 13px; letter-spacing: .10em; text-transform: uppercase;
  line-height: 1.16; color: var(--ink-brand);
}
body.gera .gera-foot .gera-flogo .gera-flogo__l2 {
  display: block; font-family: var(--font-sans); font-weight: 500;
  font-size: 8.5px; letter-spacing: .19em; text-transform: uppercase;
  line-height: 1.5; margin-top: 1px; color: var(--ink-brand);
}
@media (max-width: 480px) {
  body.gera .gera-foot .gera-flogo__mark { width: 34px; }
  body.gera .gera-foot .gera-flogo .gera-flogo__l1 { font-size: 12px; }
  body.gera .gera-foot .gera-flogo .gera-flogo__l2 { font-size: 8px; }
}


/* ── 页脚功能图标（2026-10-23，LOOK_1023 提案 7）─────────────────────────────
   站上原来一个功能性图标都没有。这里只补三个最小的：邮件 / 消息 / 外链。
   Lucide（MIT，纯 SVG，无运行时无依赖），inline 进 footer.php。
   注意：`.gera-fcontact a` 已有 44px 触摸目标（a11y 批），改成 inline-flex 不能把它压小。 */
/* 🔴 选择器必须写到 `.gera-foot` 这一层：文件里已有一条
   `body.gera .gera-foot .gera-fcontact a { display:inline-block; padding:6px 0 }`
   （0,3,2），我第一版只写 `body.gera .gera-fcontact a`（0,2,2）**压不过它** →
   inline-flex / gap 全都没生效，图标和文字之间只剩一个空格。 */
body.gera .gera-foot .gera-fcontact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
}
body.gera .gera-fic {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--accent);
}
body.gera .gera-fic--out { width: 13px; height: 13px; opacity: .65; }