/**
 * 窄屏导航适配（2026-10-10 建立，2026-10-10 二次修订）
 * 详见 sa-nav-fit.php 头部注释。
 *
 * 目标区间：810px – 1199.98px（小平板 / 拖窄的桌面窗口）
 *   - 主题在 ≥1200px 用 gap:32px、导航链接字号 14px
 *   - 1024–1199.98px 主题用 gap:24px，但导航项目一多就在这一档放不下
 *   - ≤809.98px 主题把 .sa-nav-links 设为 display:none，这里不管
 *
 * ★ 二次修订起因：导航补了第 8 项 Blog（2026-10-10）。
 *   实测 1024px：.sa-nav-btn 右边缘 1066px，而容器右边缘只有 984px
 *   ⇒ 超出容器 82px、超出视口 42px —— **按钮右侧 42px 被视口直接切掉**。
 *   同页 A/B 基线（临时摘掉 Blog）：超出容器 29px、超出视口 -10px，不切。
 *   也就是说 1024–1065px 这段的裁切是加 Blog 引入的，必须补档。
 *   ⚠️ 原注释写的「≥1024px 实测余量 45px，不动」是 6 项时的结论，
 *      加了 Contact（7 项）与 Blog（8 项）后已不成立，别再照抄。
 *
 * 二次修订后实测（1024 / 1100 / 1199 三档结果完全一致）：
 *   .sa-nav-btn 落在容器右内边距内 13px（与 ≥1200px 档对齐），
 *   超出视口 -53px，.sa-nav-inner 不再溢出（944 / 942）。
 */

@media (min-width: 810px) and (max-width: 1023.98px) {

  /* gap 24 → 14：省 6 × 10 = 60px */
  .sa-nav-links {
    gap: 14px;
  }

  /* 字号 14 → 12.5：文字部分再省约 10%，合计约 110px */
  .sa-nav-links a {
    font-size: 12.5px;
  }

  /* 给导航留出可收缩空间，避免被 logo / cart / Shop All 挤爆 */
  .sa-nav-links {
    min-width: 0;
    flex: 0 1 auto;
  }

  /* 最后兜底：万一还是放不下，让导航自己横向滚动而不是把整页撑宽 */
  .sa-nav-links {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sa-nav-links::-webkit-scrollbar {
    display: none;
  }
}

/**
 * 1024–1199.98px：第 8 项需要的收窄档。
 *
 * 实测 1024px：gap 24→16 省 7 × 8 = 56px，链接字号 14→13 再省约 30px，
 * 合计约 86px，正好补上超出容器的 82px 并留 13px 余量。
 * 这一档比下面 810–1023.98 的档轻（那只降到 12.5px），
 * 因为这一档可用宽度更大，没必要压那么狠。
 * ≥1200px 走主题自己的 gap:32 / 14px，实测有余量，不动。
 */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .sa-nav-links {
    gap: 16px;
    min-width: 0;
    flex: 0 1 auto;
  }
  .sa-nav-links a {
    font-size: 13px;
  }
}

/**
 * 810–899.98px：整体隐藏导航。
 *
 * 原因：首页导航在这一档反复测量在 -79 ~ +45 之间抖动（字体加载时机会改变
 * 文字实测宽度），860px 有时 +21 有时 -15 —— 赌不起。
 * 而基线测量证明：加 Contact **之前** 6 项在这里就已经溢出 26px，是既有问题。
 *
 * 处理：把主题的「隐藏导航」断点从 ≤809.98px 提到 ≤899.98px。
 * 藏掉后 logo / 购物车 / Shop All 按钮都在，购物主路径不受影响；
 * 页脚也有 Shop / About / FAQ / Contact / Blog 全套入口。
 *
 * ≥900px 起显示导航（900–1023.98 走上面第一档，1024–1199.98 走第二档）。
 */
@media (min-width: 810px) and (max-width: 899.98px) {
  .sa-nav-links {
    display: none;
  }
}