@charset "UTF-8";
/* ==========================================================================
 * 页头导航「联动适配」层（阶段21）
 * --------------------------------------------------------------------------
 * 为什么必须单独一个文件：
 *   .nav-layoutcontainer / .horizontal-menu-navbar 这套页头是**官网与购物车共用的同一个组件**。
 *   PC 端两类页面都加载 nav.css —— common/header/universalHead.html 里那条 nav.css 的
 *   条件只有 `{if $client=='pc'}`（官网 PC、购物车 PC 都会加载）；
 *   而 jjw-web.css 挂在 `{if $pagetype=='web' && $client=='pc'}` 上，**购物车页拿不到**。
 *   ⇒ 阶段20 把「导航内容压到内容列」写进 jjw-web.css，购物车页就吃不到：
 *     官网页头缩进了、购物车页头还是满宽贴边 —— 同一个组件两种样子，就是「没做联动适配」。
 *   本文件挂在 `{if $client=='pc'}` 下（与 nav.css 同条件），两边同时生效。
 *
 * 手机端（$client=='wap'）**不加载本文件**：移动页头是另一个组件 `.nav-head-m`，
 * 由 m_index.css 统管。已核验「移动官网首页」与「移动购物车页」的
 * `<section class="nav-head-m …">` 标记**逐字节相同（各 60,091B）**，
 * 两边共用 common/wap/head.html + m_index.css，本身就是联动的，无需在此重复。
 *
 * ⚠️ 以后给页头加样式的落位规矩：
 *      PC 页头 → 本文件；手机页头 → m_index.css；
 *      **别写进 jjw-wap.css** —— 它只在官网 WAP 加载，购物车 WAP 不加载，写那儿必然又分叉。
 * ========================================================================== */

/* 全站内容尺令牌（官网 PC 与购物车 PC 共用）。
   与 jjw-web.css §23 同源：**定义只保留这一处**，那边只消费，避免两处漂移。 */
:root {
    /* 侧边距：窄窗口按 9vw 递增，宽屏封顶 160px
       （9vw 的含义：内容列恒占窗口约 82%，即「不铺满、两边留白」的观感） */
    --jjww-gutter: clamp(48px, 9vw, 160px);
    /* 内容列的盒宽 = min(后台 --maxwidth, 窗口 − 2 × gutter) */
    --jjww-canvas: min(var(--maxwidth, 1440px), calc(100% - 2 * var(--jjww-gutter)));
}

/* 页头导航（2026-10-01）：首页导航不再压到内容列，与购物车页导航对齐，
   统一回 nav.css 默认的 40px 左边距（满宽贴边、极低侧边距）。仅保留上面的内容尺令牌供 jjw-web.css 消费。 */