/* ============================================================
   设计令牌（Design Tokens）
   全站颜色、字体、圆角、阴影都从这里取值。
   换风格只需改这一块，或改 <html data-theme="…"> 属性。
   ============================================================ */
:root{

  /* ── 字体 ──
     全部为系统字体栈，不依赖外部字体服务：
     国内直连 Google Fonts 不通，会让首屏白屏等待；系统字体反而更快更稳。
     衬线体负责大标题（编辑/杂志感），无衬线体负责正文（可读性）。 */
  --font-display:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman','Songti SC','STSong',serif;
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  /* ── 圆角：三档，取代原来 20 余种随手取值 ──
     高端版式靠直角与细线，圆角越小越克制。 */
  --radius-xs:2px;
  --radius-sm:3px;
  --radius-md:4px;
  --radius-lg:6px;
  --radius-pill:999px;

  /* ── 阴影：取消柔光晕影，改为几乎看不见的一层投影 ── */
  --shadow-sm:0 1px 2px rgba(20,17,13,.04);
  --shadow-md:0 12px 28px -14px rgba(20,17,13,.16);
  --shadow-lg:0 28px 56px -28px rgba(20,17,13,.20);

  /* ── 版面宽度 ──
     2026-10-15：原来 1200px 定宽，在 1920+ 大显示器上两侧各空约 360px，
     改成自适应：≤1334px 视口仍是 1200 基准不变；之后随视口拉伸，
     上限 1720px。
     2026-10-16：用户反馈主体太宽，边距翻倍——流式从 90vw 收到 80vw
     （每侧 5vw→10vw，1920 屏两侧各约 192px），容器最小留白也翻倍
     （28px/侧→56px/侧，移动端 18px/侧→36px/侧）。
     网格全是 fr / auto-fill，卡片跟着容器等比变宽，不用逐个改。 */
  --container:min(1720px, max(1200px, 80vw));

  /* ── 默认主题：象牙编辑风 ── */
  --ink:#17140f;          /* 标题、强调文字 */
  --ink-soft:#312c27;     /* 正文 */
  --muted:#47423a;        /* 次要说明 */
  --faint:#655d53;        /* 极弱提示、序号 */
  --ghost:#7c6f5c;        /* 分隔符、占位 */
  --line:#e4ddd1;         /* 描边（默认） */
  --line-soft:#efe9df;    /* 内部细线 */
  --line-strong:#cec4b3;  /* 悬停描边 */

  --paper:#faf8f4;        /* 页面底色（象牙纸） */
  --surface:#ffffff;      /* 卡片面 */
  --surface-2:#f3efe6;    /* 交替区块底 */
  --surface-3:#ece6da;    /* 浅色填充块 */

  --accent:#1f3a2e;       /* 主强调：深松墨绿 */
  --accent-2:#2c5343;     /* 次级强调 */
  --accent-dark:#142620;  /* 悬停加深 */
  --accent-tint:#e9efe9;  /* 强调浅底 */
  --accent-quiet:#6d8b78; /* 标题里斜体强调的柔和绿 */
  --accent-contrast:#fbf9f4; /* 强调底上的文字 */
  --accent-text:#2c5343;  /* 小字号强调文字：浅底上要够深才读得清 */

  --gold:#a8863f;         /* 古铜金：点缀线、图标 */
  --gold-ink:#8a6c2e;     /* 金色文字（保证对比度） */
  --gold-tint:#f6efe0;    /* 金色浅底 */

  --dark:#14110d;         /* 深底区块（公告条 / 结尾 CTA） */
  --on-dark:#f5f1e8;      /* 深底上的文字 */
  --on-dark-soft:#b3ab9c; /* 深底上的次要文字 */

  /* ── 富文本「文字颜色」按钮的别名（2026-10-14）──
     后台「文字内容模块」的颜色按钮产出 <span style="color: var(--rt-…)">。
     别名指向各主题自己的令牌；自定义属性是**使用时才解析**的，所以
     html[data-theme] 覆盖 --ink 之后这里自动跟随，不用每套主题重写一遍。
     --rt-accent 用 --accent-text 而不是 --accent：后者在浅色主题里
     是给大色块用的，小字号文字要够深才读得清（各主题都单独调过）。 */
  --rt-ink:var(--ink);
  --rt-muted:var(--muted);
  --rt-accent:var(--accent-text);
  --rt-paper:var(--paper);        /* 反白：深色底上用 */
  --rt-danger:#b42318;            /* 警示红：语义色，不随主题变 */
  --rt-mark-bg:var(--gold-tint);  /* 高亮底色 */

  /* ── 半透明层 ── */
  --header-bg:rgba(250,248,244,.90);
  --tag-bg:rgba(255,255,255,.94);
  --glass:rgba(255,255,255,.72);
  --gold-veil:rgba(168,134,63,.12);
  --focus-ring:rgba(31,58,46,.14);

  /* ── 兼容旧变量名（样式表与模板里已有引用，保留别名避免改动面扩大） ── */
  --green:var(--accent);
  --green-2:var(--accent-2);
  --cream:var(--surface-2);
  --yellow:var(--gold);
  --orange:var(--gold);
  --radius:var(--radius-md);
  --shadow:var(--shadow-md);
}

/* 主题二：墨绿传承风 —— 保留原有品牌绿，但去掉糖果黄橘与柔光 */
html[data-theme="heritage"]{
  --ink:#16241c;
  --ink-soft:#26322b;
  --muted:#3d4842;
  --faint:#58645c;
  --ghost:#647665;
  --line:#dde3d9;
  --line-soft:#eaeee6;
  --line-strong:#c4cfc0;

  --paper:#fbfaf4;
  --surface:#fffefa;
  --surface-2:#f2f4ec;
  --surface-3:#e8ede3;

  --accent:#214b3d;
  --accent-2:#2e6350;
  --accent-dark:#17392e;
  --accent-tint:#e4ebe2;
  --accent-quiet:#6f8b77;
  --accent-contrast:#fbfaf4;
  --accent-text:#2e6350;

  --gold:#c9a24c;
  --gold-ink:#97782c;
  --gold-tint:#f7edd7;

  --dark:#17392e;
  --on-dark:#f7f4e9;
  --on-dark-soft:#b7c6b8;

  --header-bg:rgba(251,250,244,.90);
  --tag-bg:rgba(255,254,250,.94);
  --glass:rgba(255,255,255,.72);
  --gold-veil:rgba(201,162,76,.14);
  --focus-ring:rgba(33,75,61,.14);
}

/* 主题四：静海蓝 × 霓虹粉
   ────────────────────────────────────────────────────────────
   三个颜色各司其职，不要混用：
     静海蓝 #082A47 → 骨架。标题、正文、深色区块、按钮上的文字。
     霓虹粉 #FE5EA0 → 强调。按钮底色、点缀细线、图标、编号。
     霞光粉 #FAE4EB → 空气。交替区块底色、图片衬底、浅填充。
   注意霓虹粉够亮但不够深：它当「底色」用很好看，
   当「小字颜色」放在白底上对比度只有 2.9:1，读不清。
   小字号强调文字统一走 --accent-text（深玫红，对比度 4.5:1 达标）。 */
html[data-theme="ocean-pink"]{
  --ink:#082a47;
  --ink-soft:#192a3c;
  --muted:#33414b;
  --faint:#4b5d6a;
  --ghost:#5a7790;
  --line:#e6d5dc;
  --line-soft:#f2e7ec;
  --line-strong:#d6bfc9;

  --paper:#fffcfd;
  --surface:#ffffff;
  --surface-2:#fae4eb;
  --surface-3:#f7d9e3;

  --accent:#fe5ea0;
  --accent-2:#d4387c;
  --accent-dark:#e5478c;
  --accent-tint:#fde8f1;
  --accent-quiet:#d4387c;
  --accent-contrast:#0a1420; /* 霓虹粉底上的文字：用近黑，6.46:1
                                （原来的 #082a47 只有 5.11:1，小字号发灰） */
  --accent-text:#d4387c;

  --gold:#fe5ea0;
  --gold-ink:#c42e6e;
  --gold-tint:#fae4eb;

  --dark:#082a47;
  --on-dark:#ffffff;
  --on-dark-soft:#b3c4d4;

  --header-bg:rgba(255,252,253,.90);
  --tag-bg:rgba(255,255,255,.95);
  --glass:rgba(255,255,255,.74);
  --gold-veil:rgba(254,94,160,.12);
  --focus-ring:rgba(254,94,160,.30);
}

/* 主题五：翠绿活力风
   ────────────────────────────────────────────────────────────
   取自 ueeshop 官网的配色骨架：
     翠绿 #0DB083  → 品牌主色（他们全站用了 100+ 次的那个绿）
     琥珀 #FECE2E  → 次要点缀（评分星、编号、小徽标）
     浅灰 #FAFAFA  → 交替区块底
   分工同静海蓝那套，但这次主色是「亮色」，所以文字色反过来：
     翠绿 #0DB083 → 强调。按钮底色、细线、图标、编号。
     琥珀 #FECE2E → 点缀。只做小面积高亮，不做底色。
     深墨绿       → 骨架。标题、正文、深色区块、翠绿底上的文字。

   ⚠ 两个必须知道的对比度事实（都实测过，别改回去）：
   1. 翠绿 #0DB083 放在白底上只有 **2.78:1**，当小字颜色读不清
      （ueeshop 自己就是这么用的，不达标）。所以小字强调统一走
      --accent-text（#067A59，5.34:1 达标），翠绿只做「底色 + 深字」。
   2. 翠绿底上**不能用白字**（2.78:1），要用深墨绿 #0A2F26（5.22:1）。
      所以 --accent-contrast 是深色而不是白色 —— 这跟前面几套深色
      主色主题（白字）正好相反，改的时候注意别照抄。
   3. 琥珀 #FECE2E 白底上只有 1.49:1，只能做底色；当文字要降到
      #8A6100（--gold-ink，5.54:1）。 */
html[data-theme="emerald"]{
  --ink:#0b2f27;
  --ink-soft:#1f332e;
  --muted:#394944;
  --faint:#56645f;
  --ghost:#557a6b;
  --line:#dde9e4;
  --line-soft:#edf4f1;
  --line-strong:#c6d8d1;

  --paper:#f8fcfa;
  --surface:#ffffff;
  --surface-2:#e6f7f0;
  --surface-3:#d6f2e6;

  --accent:#0db083;          /* ueeshop 原色，做底色最美 */
  --accent-2:#067a59;
  --accent-dark:#0cbc8e;     /* 悬停：亮色底要「变亮」而不是变深，
                                变深会让上面的深字对比度掉下去 */
  --accent-tint:#e3f8f0;
  --accent-quiet:#0a7a5e;
  --accent-contrast:#0b1410; /* 翠绿底上的文字：近黑中性色，6.73:1
                                （深墨绿 #0a2f26 虽然 5.22:1 达标，但同色相
                                 叠在同色相底上会显得发灰，换成近黑更利落） */
  --accent-text:#067a59;     /* 小字翠绿：浅底上 5.34:1 */

  --gold:#c08400;            /* 琥珀做底色/装饰线（3.21:1，够图形用） */
  --gold-ink:#8a6100;        /* 琥珀做文字：5.54:1 */
  --gold-tint:#fdf4d6;

  --dark:#08302a;            /* 深墨绿页脚 */
  --on-dark:#ffffff;
  --on-dark-soft:#a9c3bb;

  --header-bg:rgba(248,252,250,.90);
  --tag-bg:rgba(255,255,255,.95);
  --glass:rgba(255,255,255,.74);
  --gold-veil:rgba(254,206,46,.22);
  --focus-ring:rgba(13,176,131,.30);
}

/* 主题八：深海蓝橙撞色风 —— 深蓝 #082A47 + 橙红 #FF4500 + 雪白 #FFFAFA
   ────────────────────────────────────────────────────────────
   2026-10-15 换色：原「亮橙主色 + 白底 + 深棕墨」改为用户指定三色搭配。
   骨架逻辑反过来了：这回深色墨本身够深（深蓝 14.7:1），亮色只做强调：
     深海蓝 #082A47 → 骨架。标题、正文、页脚/公告等深色区块。
     橙红   #FF4500 → 强调。按钮底色、装饰图形。
     雪白   #FFFAFA → 底色。

   ⚠ 对比度事实（实测）：
   1. #082A47 白底 **14.7:1**，随便用；深蓝底上白字同值。
   2. #FF4500 白底 **3.44:1**，只够当底色：
      · 橙底上白字 3.44（用户 2026-10-15 指定全站按钮用白字，
        3.44 过大字号 3:1 线，小字强调仍走 --accent-text）；
      · 小字强调统一走 --accent-text（深橙 #c33000，白底 5.65:1）。
   3. hover 往深走（#E63E00，白字 4.15）——白字场景下往亮走会把
      对比度稀释到 2.85，方向与深字主题相反。
   4. 公告条 / final-cta 的「accent 底 + 白字」不达标（3.44），
      专属装饰段里：公告条改深蓝底（正好用 --dark）、final-cta 浅底墨字。
   5. 点缀金用暖黄，在深蓝底上 8.1:1、白底上 gold-ink 6.9:1。 */
html[data-theme="tangerine"]{
  --ink:#082a47;             /* 品牌深海蓝，白底 14.7:1 */
  --ink-soft:#1c3a55;
  --muted:#33506b;
  --faint:#4c6781;
  --ghost:#5d7d96;
  --line:#dbe4ec;
  --line-soft:#eef3f7;
  --line-strong:#c9d6e2;

  --paper:#fffafa;           /* 品牌雪白 */
  --surface:#ffffff;
  --surface-2:#eef4f8;
  --surface-3:#dfeaf1;

  --accent:#ff4500;          /* 品牌橙红，做底色（白底 3.44，别当文字用） */
  --accent-2:#c33000;
  --accent-dark:#e63e00;     /* 悬停往深走（白字按钮往亮会掉对比度） */
  --accent-tint:#ffe3d6;
  --accent-quiet:#c33000;
  --accent-contrast:#ffffff; /* 橙底按钮文字：白（用户指定，3.44） */
  --accent-text:#c33000;     /* 小字强调：白底 5.65:1 */

  --gold:#f2b705;            /* 暖黄点缀（深蓝底上 8.1:1） */
  --gold-ink:#7a5300;
  --gold-tint:#fdf3d6;

  --dark:#082a47;            /* 深蓝页脚 / 公告条 / 深色区块 */
  --on-dark:#ffffff;
  --on-dark-soft:#a8c0d4;

  --header-bg:rgba(255,250,250,.90);
  --tag-bg:rgba(255,255,255,.95);
  --glass:rgba(255,255,255,.74);
  --gold-veil:rgba(242,183,5,.18);
  --focus-ring:rgba(255,69,0,.30);
}

/* 主题九：品牌撞色风 —— 取自 PLW Logo 本身的四色
   ─────────────────────────────────────────────────────────——
   2026-10-16 新增：从 logo 图逐像素采样得到：
     品牌蓝 #003880~#004898 → P 字主体，全站骨架与按钮
     天青蓝 #00A0E0~#08C0F8 → W 字渐变亮部，标题强调
     熔橙   #F87800        → L 字渐变，点缀（金位）
     冰白                     → 底色（带一丝蓝调）
   与 tangerine 的区别：蓝更亮更「宝」、点缀橙偏暖不偏红、
   亮部区块是冰蓝而非杏橙。

   ⚠ 对比度事实（实测；2026-10-16 二版：全蓝系提亮一档，原值见括号）：
   1. --accent #0B5CC0（原 #0050A8）白底 6.35:1，蓝底白字同值 —— 按钮白字
      达标，无需像 tangerine 那样给公告条/final-cta 换浅底补丁。
   2. 天青蓝 #0084C9 当标题斜体强调（大字）3.76:1 达标；
      小字强调一律走 --accent-text #0B5CB8（6.49:1，原 #00538F）。
   3. 熔橙 #F87800 白底 2.46:1 只做图形点缀；当文字用
      --gold-ink #B5540A（4.96:1）；在深蓝 --dark 底上 3.9:1，
      只够大字（final-cta h2 em），符合现有用法。 */
html[data-theme="brand-pop"]{
  --ink:#0d47a5;             /* 品牌蓝二版（原 #083a86），白底约 8.5:1 */
  --ink-soft:#2a4a72;
  --muted:#3f5c80;
  --faint:#58779c;
  --ghost:#6d8cb0;
  --line:#d8e3ef;
  --line-soft:#e9f1f8;
  --line-strong:#c2d4e6;

  --paper:#fbfdff;           /* 冰白 */
  --surface:#ffffff;
  --surface-2:#ecf4fb;       /* 冰蓝区块底 */
  --surface-3:#ddedf9;

  --accent:#e85d04;          /* 熔橙按钮版（2026-10-16 二版二改：应「网站按钮都用
                               橙色」，按钮系从品牌蓝换成 logo L 的熔橙系。
                               原采样 #F87800 白字只有 2.46:1 读不清，
                               加深到 #E85D04（白字 3.5:1，与 tangerine 的
                               橙红 3.44 同一水平，用户在 tangerine 也指定过白字） */
  --accent-2:#c24e03;
  --accent-dark:#a84403;     /* 悬停往深走（白字 6.0:1） */
  --accent-tint:#ffe9d4;
  --accent-quiet:#0084c9;    /* 天青蓝：保留 W 字的天青做标题 em，与橙按钮撞色呼应 logo */
  --accent-contrast:#ffffff;
  --accent-text:#b5540a;     /* 小字强调：深橙，白底 4.96:1 */

  --gold:#f87800;            /* logo 熔橙，点缀线/图标/深底大字 */
  --gold-ink:#b5540a;        /* 橙做文字：白底 4.96:1 */
  --gold-tint:#fdeedd;

  --dark:#0a3a8c;            /* 深蓝页脚（二版，原 #052c6b）/ 公告条 / 深色区块 */
  --on-dark:#ffffff;
  --on-dark-soft:#a9c3e2;

  --header-bg:rgba(251,253,255,.90);
  --tag-bg:rgba(255,255,255,.95);
  --glass:rgba(255,255,255,.74);
  --gold-veil:rgba(248,120,0,.14);
  --focus-ring:rgba(232,93,4,.30);
}

/* 主题十：Kraken 紫韵风 —— 按项目根目录 DESIGN.md（Design System: Kraken）落地
   ────────────────────────────────────────────────────────────
   2026-10-26 新增：一套干净、可信的白底紫色系（DESIGN.md 原版是加密交易所）。
   四个颜色各司其职：
     品牌紫 #7132f5  → 主强调。按钮底色、链接、点缀线、图标。
     深紫   #5741d8 / #5b1ecf → 悬停加深、小字强调（比主紫更沉，白底对比更高）。
     近黑   #101114  → 骨架。标题、正文、深色区块、页脚。
     冷灰   #686b82 / 银蓝 #9497a9 → 次要文字、描边。
   字体：Display 与 UI 都走 IBM Plex Sans（DESIGN 的 Kraken-Brand/Product 是专有
   字体拿不到，fallback 指定 IBM Plex Sans），由 base.html 在本主题激活时按需引入。
   圆角：按钮一律 12px（DESIGN 明令「不用胶囊，12px 是按钮上限」）。
   阴影：whisper 级（DESIGN §6：rgba(0,0,0,.03) 0 4px 24px / rgba(16,24,40,.04) 0 1px 4px）。

   ⚠ 对比度事实（实测，别改回去）：
   1. 品牌紫 #7132f5 白底 = 6.06:1（AA 达标）—— 所以 --accent 既能当按钮底色
      （白字 6.06:1），也能直接当小字强调色，无需像 emerald 那样区分 accent/accent-text。
   2. --accent-dark #5b1ecf 白字 = 7.2:1，悬停往深走，白字更清晰。
   3. 成功语义绿 #149e61（DESIGN 的 positive 色）只用于徽章，16% 底 + #026b3f 字；
      不进主令牌，避免全站出现第二个高饱和主色。 */
html[data-theme="kraken"]{
  /* Kraken 的字体令牌：覆盖 :root 的衬线/系统栈，Display 与正文同族（DESIGN §3） */
  --font-display:'IBM Plex Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-sans:'IBM Plex Sans','Helvetica Neue',Helvetica,Arial,sans-serif;

  --ink:#101114;             /* Near Black：标题、正文主色 */
  --ink-soft:#26282f;        /* 正文略柔一档 */
  --muted:#686b82;           /* Cool Gray：次要说明 */
  --faint:#9497a9;           /* Silver Blue：极弱提示、序号 */
  --ghost:#a7aab8;           /* 分隔符、占位 */
  --line:#dedee5;            /* Border Gray：默认描边 */
  --line-soft:#eaeaef;       /* 内部细线 */
  --line-strong:#c6c6d2;     /* 悬停描边 */

  --paper:#ffffff;           /* 页面底色：纯白（DESIGN 主 surface） */
  --surface:#ffffff;
  --surface-2:#f6f6fa;       /* 交替区块底：极淡冷灰 */
  --surface-3:#eeebfa;       /* 浅紫填充块 */

  --accent:#7132f5;          /* Kraken Purple：按钮、链接、强调 */
  --accent-2:#5741d8;        /* Purple Dark：描边式按钮、次级强调 */
  --accent-dark:#5b1ecf;     /* Purple Deep：悬停往深走（白字 7.2:1） */
  --accent-tint:#ece4fd;     /* 品牌紫 16% 观感的实色浅底 */
  --accent-quiet:#7132f5;    /* 标题斜体强调（大字），本身够深 */
  --accent-contrast:#ffffff; /* 紫底上的文字：白，6.06:1 */
  --accent-text:#5b1ecf;     /* 小字强调：深紫，白底 ≥6:1 */

  --gold:#855bfb;            /* DESIGN 的 Purple Subtle 基色 rgba(133,91,251)：点缀线/图标 */
  --gold-ink:#5b1ecf;        /* 金位文字：深紫，白底达标 */
  --gold-tint:#ece4fd;       /* 金位浅底 */

  --dark:#101114;            /* 近黑页脚 / 公告条 / 深色区块（DESIGN 用近黑非紫做底） */
  --on-dark:#ffffff;
  --on-dark-soft:#9497a9;

  --header-bg:rgba(255,255,255,.90);
  --tag-bg:rgba(255,255,255,.95);
  --glass:rgba(255,255,255,.72);
  --gold-veil:rgba(133,91,251,.14);
  --focus-ring:rgba(113,50,245,.30);

  /* 阴影：whisper 级，覆盖 :root 的暖调投影（DESIGN §6） */
  --shadow-sm:rgba(16,24,40,.04) 0 1px 4px;
  --shadow-md:rgba(0,0,0,.03) 0 4px 24px;
  --shadow-lg:rgba(0,0,0,.06) 0 12px 40px;
}

*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.container{width:min(var(--container),calc(100% - 112px));margin-inline:auto}.announcement-bar{background:var(--green);color:var(--on-dark);font-size:11px;letter-spacing:.035em}.announcement-inner{height:35px;display:flex;align-items:center;justify-content:space-between}.announcement-dot,.label-dot{display:inline-block;width:6px;height:6px;border-radius:var(--radius-pill);background:var(--yellow);margin-right:8px;vertical-align:2px}.announcement-right{color:var(--on-dark-soft)}.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.nav-wrap{height:86px;display:flex;align-items:center;gap:34px}.brand{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;color:var(--green)}.brand-logo{display:block;width:43px;height:43px;object-fit:contain;flex-shrink:0}.brand-mark{display:grid;place-items:center;width:43px;height:43px;background:var(--gold);border-radius:var(--radius-md);color:var(--green);padding:7px}.brand-mark svg{width:100%;height:100%}.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{font-family:var(--font-display);font-size:20px;letter-spacing:-.06em;font-weight:600}.brand-copy small{font-size:8px;letter-spacing:.25em;font-weight:600;margin-top:5px}.main-nav{display:flex;align-items:center;gap:27px;margin-left:auto}.nav-link{color:var(--ink-soft);font-size:12px;font-weight:600;white-space:nowrap;transition:color .2s}.nav-link:hover,.nav-link.is-current{color:var(--green)}.chevron{margin-left:4px;font-size:15px}.nav-dropdown{position:relative;height:86px;display:flex;align-items:center}.dropdown-menu{position:absolute;top:70px;left:-18px;width:215px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:9px;box-shadow:var(--shadow);display:none}.nav-dropdown:hover .dropdown-menu,.nav-dropdown:focus-within .dropdown-menu{display:block}.dropdown-menu a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;color:var(--ink-soft)}.dropdown-menu a:hover{background:var(--surface-2);color:var(--green)}.dropdown-menu span{color:var(--faint)}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-contrast);padding:13px 18px;font-size:12px;font-weight:600;transition:transform .2s,background .2s,box-shadow .2s;cursor:pointer;white-space:nowrap}.button:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 8px 22px var(--shadow-md)}.button span{font-size:16px;font-weight:400}.button-dark{background:var(--green)}.button-large{padding:16px 21px;font-size:13px}.button-light{background:var(--gold-tint);color:var(--green)}.button-light:hover{background:var(--surface);color:var(--green)}.button-outline{background:transparent;color:var(--green);border-color:var(--line-strong)}.button-outline:hover{background:var(--surface-3)}.nav-cta{padding:12px 16px;gap:15px}.mobile-menu-toggle{display:none;border:0;background:transparent;padding:9px;cursor:pointer}.mobile-menu-toggle span{display:block;width:23px;height:2px;background:var(--green);margin:5px;border-radius:var(--radius-sm)}
.page{display:none;min-height:60vh}.page.is-active{display:block;animation:pageFade .3s ease}@keyframes pageFade{from{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.hero-section{background:var(--cream);overflow:hidden;position:relative;padding-top:70px}.hero-grid{display:grid;grid-template-columns:1.01fr .99fr;gap:46px;align-items:center;min-height:475px}.hero-copy{padding:5px 0 30px;position:relative;z-index:2}.eyebrow{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;line-height:1.4}.eyebrow-line{display:inline-block;width:27px;height:1px;background:var(--gold)}.hero-copy h1,.interior-hero h1{font-family:var(--font-display);font-size:clamp(43px,5vw,68px);line-height:1.07;letter-spacing:-.065em;font-weight:600;margin:25px 0 20px;color:var(--ink)}h1 em,h2 em{font-family:var(--font-display);font-weight:400;color:var(--accent-quiet);letter-spacing:-.06em}.hero-lede{font-size:15px;line-height:1.85;color:var(--muted);max-width:480px;margin:0}.hero-actions{display:flex;align-items:center;gap:27px;margin-top:29px}.text-link{display:inline-flex;align-items:center;gap:14px;color:var(--green);font-size:12px;font-weight:600;white-space:nowrap}.text-link span{font-size:18px;font-weight:400;transition:transform .2s}.text-link:hover span{transform:translateX(4px)}.hero-micro-proof{display:flex;align-items:center;gap:14px;margin-top:42px}.avatar-stack{display:flex;align-items:center;padding-left:2px}.avatar-stack span,.avatar-stack b{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;border:2px solid var(--cream);margin-left:-4px;font-size:10px;font-weight:600}.avatar-stack span:nth-child(1){background:var(--surface-3);color:var(--ink-soft)}.avatar-stack span:nth-child(2){background:var(--surface-3);color:var(--ink)}.avatar-stack span:nth-child(3){background:var(--surface-3);color:var(--ink-soft)}.avatar-stack b{background:var(--accent);color:var(--accent-contrast);font-weight:500}.hero-micro-proof strong,.hero-micro-proof small{display:block}.hero-micro-proof strong{font-size:11px}.hero-micro-proof small{font-size:10px;color:var(--faint);margin-top:2px}.hero-art-wrap{position:relative;padding:7px 0 10px}.hero-art{width:100%;max-height:540px;object-fit:contain;filter:saturate(.96)}.hero-art-tag{position:absolute;z-index:2;background:var(--tag-bg);box-shadow:0 10px 30px var(--shadow-sm);border:1px solid var(--line-soft);display:flex;align-items:center;gap:11px;border-radius:var(--radius-md);padding:12px 15px}.hero-art-tag strong,.hero-art-tag small{display:block;white-space:nowrap}.hero-art-tag strong{font-size:11px;color:var(--ink)}.hero-art-tag small{font-size:9px;color:var(--muted);margin-top:2px}.tag-top{top:45px;right:-10px}.tag-bottom{bottom:28px;left:-28px}.tag-icon,.tag-check{width:33px;height:33px;border-radius:var(--radius-md);display:grid;place-items:center;font-size:17px;background:var(--gold);color:var(--green)}.tag-check{background:var(--accent-tint)}.hero-spark{position:absolute;color:var(--gold);font-size:26px}.spark-one{left:8px;top:29%}.spark-two{right:18px;bottom:16%;font-size:19px}.hero-bottom{display:flex;align-items:center;gap:17px;padding:12px 0 21px;font-size:9px;letter-spacing:.12em;color:var(--faint)}.hero-bottom>span:first-child{font-weight:600;color:var(--faint)}.hero-bottom-line{height:1px;flex:1;background:var(--line)}.hero-bottom-note{letter-spacing:.015em;font-size:10px;text-transform:none}.section-padding{padding:91px 0}.section-padding-sm{padding:27px 0}.service-strip{border-bottom:1px solid var(--line);background:var(--surface)}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:23px}.service-item{display:flex;align-items:center;gap:13px;padding:8px 10px}.service-icon{width:45px;height:45px;display:grid;place-items:center;border-radius:var(--radius-md);font-size:20px;flex-shrink:0}.icon-orange{background:var(--surface-3);color:var(--gold-ink)}.icon-green{background:var(--accent-tint);color:var(--accent-quiet)}.icon-lilac{background:var(--surface-3);color:var(--accent)}.icon-yellow{background:var(--gold-tint);color:var(--gold-ink)}.service-item h3{font-size:12px;margin:0 0 4px;letter-spacing:-.02em}.service-item p{font-size:10px;line-height:1.55;color:var(--muted);margin:0;max-width:185px}.section-heading{margin-bottom:32px}.heading-with-link{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.section-heading h2,.factory-copy h2,.about-content h2,.contact-info h2{font-family:var(--font-display);font-size:clamp(34px,4vw,47px);line-height:1.11;font-weight:600;letter-spacing:-.06em;margin:18px 0 0}.section-intro{font-size:13px;color:var(--muted);max-width:440px;line-height:1.8;margin:15px 0 0}.categories-section{background:var(--surface)}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.category-card{border-radius:var(--radius-md);overflow:hidden;position:relative;min-width:0;padding:17px 17px 0;min-height:300px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}.category-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.category-dog{background:var(--surface-3)}.category-cat{background:var(--surface-3)}.category-toys{background:var(--surface-3)}.category-travel{background:var(--surface-3)}.category-card-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.category-number{font-size:9px;font-weight:600;letter-spacing:.1em;color:var(--muted)}.category-arrow{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--glass);color:var(--green);font-size:15px}.category-card img{width:100%;height:177px;object-fit:contain;mix-blend-mode:multiply;flex:1;margin:3px 0 -5px}.category-card-title{margin:0 -17px;padding:17px;background:var(--glass);display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative}.category-card-title h3{font-size:13px;margin:0;letter-spacing:-.025em}.category-card-title span{font-size:9px;color:var(--muted);text-align:right}.products-section{background:var(--surface-2)}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.product-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;transition:transform .22s,box-shadow .22s,border .22s}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 35px var(--shadow-md);border-color:var(--line-strong)}.product-image-wrap{position:relative;background:var(--surface-3);overflow:hidden;cursor:pointer}.product-card:nth-child(4n+2) .product-image-wrap{background:var(--accent-tint)}.product-card:nth-child(4n+3) .product-image-wrap{background:var(--surface-3)}.product-card:nth-child(4n+4) .product-image-wrap{background:var(--surface-3)}.product-image-wrap img{width:100%;aspect-ratio:1.16/1;object-fit:cover;transition:transform .35s}.product-card:hover .product-image-wrap img{transform:scale(1.035)}.product-badge{position:absolute;top:12px;left:12px;padding:6px 9px;border-radius:var(--radius-sm);background:var(--tag-bg);backdrop-filter:blur(8px);font-size:8px;font-weight:600;color:var(--green);letter-spacing:.04em;text-transform:uppercase}.product-card-body{padding:15px 15px 14px}.product-category{display:block;font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:6px}.product-card h3{font-size:14px;line-height:1.35;letter-spacing:-.03em;margin:0 0 7px;font-weight:600}.product-card p{font-size:10px;line-height:1.6;color:var(--muted);margin:0;min-height:32px}.product-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line-soft);margin-top:14px;padding-top:12px}.product-sku{font-size:9px;color:var(--faint)}.product-inquiry{border:0;background:transparent;color:var(--green);font-size:10px;font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:4px 0}.product-inquiry span{font-size:15px;transition:transform .2s}.product-inquiry:hover span{transform:translateX(3px)}.factory-teaser{background:var(--surface-2)}.factory-teaser-grid{display:grid;grid-template-columns:1fr .9fr;gap:75px;align-items:center}.factory-visual{position:relative}.factory-visual>img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow)}.factory-image-label{position:absolute;bottom:17px;left:17px;right:17px;background:var(--tag-bg);border-radius:var(--radius-md);padding:12px 14px;display:flex;align-items:center;font-size:9px;font-weight:600;letter-spacing:.1em;color:var(--green)}.factory-image-label span:last-child{margin-left:auto;font-size:16px;letter-spacing:0}.factory-copy h2{margin:20px 0 18px}.factory-copy>p:not(.demo-note){font-size:13px;color:var(--muted);line-height:1.9;max-width:490px}.factory-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 0;margin:25px 0}.factory-stat-row strong,.factory-stat-row span{display:block}.factory-stat-row strong{font-family:var(--font-display);font-size:22px;letter-spacing:-.06em;color:var(--green)}.factory-stat-row span{font-size:9px;color:var(--muted);margin-top:4px;line-height:1.45}.factory-copy .button{margin-top:4px}.demo-note{font-size:10px;color:var(--faint);margin-top:15px;font-style:italic}.blog-section{background:var(--surface)}.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.blog-card{min-width:0}.blog-image{border-radius:var(--radius-md);overflow:hidden;background:var(--surface-3);margin-bottom:17px;cursor:pointer}.blog-image img{width:100%;aspect-ratio:1.5/1;object-fit:cover;transition:transform .4s}.blog-card:hover .blog-image img{transform:scale(1.035)}.blog-meta{display:flex;align-items:center;gap:9px;color:var(--faint);font-size:9px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px}.blog-meta .meta-dot{width:3px;height:3px;background:var(--gold);border-radius:100%}.blog-card h3{font-family:var(--font-display);font-size:17px;line-height:1.38;letter-spacing:-.04em;margin:0 0 9px;font-weight:600}.blog-card h3 a:hover{color:var(--accent-quiet)}.blog-card p{font-size:11px;line-height:1.75;color:var(--muted);margin:0 0 13px}.blog-read{font-size:10px;font-weight:600;color:var(--green);display:inline-flex;gap:9px;align-items:center}.blog-read span{font-size:15px}.final-cta-section{background:var(--green);color:var(--on-dark);overflow:hidden}.final-cta{min-height:300px;display:flex;align-items:center;gap:29px;position:relative;padding-top:58px;padding-bottom:58px}.final-cta-icon{width:60px;height:60px;display:grid;place-items:center;border-radius:var(--radius-lg);background:var(--accent-tint);color:var(--green);font-size:28px;flex-shrink:0;align-self:flex-start;margin-top:27px}.eyebrow-light{color:var(--on-dark-soft)}.final-cta h2{font-family:var(--font-display);font-size:clamp(31px,4vw,46px);letter-spacing:-.06em;line-height:1.12;margin:14px 0 9px}.final-cta h2 em{color:var(--gold)}.final-cta p{font-size:12px;color:var(--on-dark-soft);margin:0}.final-cta>.button{margin-left:auto;z-index:2;flex-shrink:0}.cta-doodle{position:absolute;color:var(--gold-veil);font-size:120px;right:160px;top:-18px;transform:rotate(18deg)}.doodle-two{right:60px;top:auto;bottom:-56px;font-size:100px;transform:rotate(-8deg)}
.site-footer{background:var(--surface-2)}.footer-top{display:grid;grid-template-columns:1.3fr .8fr .8fr 1.1fr;gap:65px;padding-top:54px;padding-bottom:46px}.brand-footer .brand-mark{background:var(--green);color:var(--gold)}.footer-brand-col>p{font-size:11px;color:var(--muted);line-height:1.9;margin:18px 0 0}.footer-col h4{font-size:9px;letter-spacing:.14em;color:var(--faint);margin:7px 0 17px}.footer-col a{display:block;font-size:11px;color:var(--ink-soft);margin:11px 0}.footer-col a:hover,.footer-bottom a:hover{color:var(--gold-ink)}.footer-newsletter h3{font-family:var(--font-display);font-size:21px;line-height:1.25;letter-spacing:-.05em;margin:12px 0}.muted-label{display:block;font-size:9px;letter-spacing:.12em;color:var(--faint);font-weight:600}.footer-email{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:11px;font-weight:600;color:var(--green);max-width:240px}.footer-email span{font-size:17px}.social-dots{display:flex;gap:8px;margin-top:18px}.social-dots span{width:25px;height:25px;border-radius:50%;border:1px solid var(--line);color:var(--muted);display:grid;place-items:center;font-size:9px;font-weight:600}.footer-bottom{border-top:1px solid var(--line);padding:17px 0 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:9px;color:var(--faint)}.footer-bottom-right{display:flex;gap:22px}.footer-bottom a{color:var(--muted)}
.interior-hero{background:var(--cream);overflow:hidden}.interior-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;min-height:350px;padding-top:40px;padding-bottom:35px;gap:55px}.interior-hero h1{font-size:clamp(42px,5vw,63px);margin:20px 0 17px}.interior-hero p{max-width:495px;color:var(--muted);font-size:13px;line-height:1.9;margin:0 0 25px}.interior-hero-art{position:relative;max-width:410px;justify-self:end;width:100%}.interior-hero-art img{width:100%;height:300px;object-fit:contain}.floating-sticker{position:absolute;right:-8px;top:26px;background:var(--gold);color:var(--accent);width:81px;height:81px;display:grid;place-content:center;text-align:center;transform:rotate(9deg);border-radius:50%;font-size:9px;line-height:1.4;font-weight:600;letter-spacing:.05em}.product-hero .interior-hero-art img{height:270px}.interior-body{padding-top:44px;padding-bottom:90px}.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:25px}.muted-label{font-size:9px;letter-spacing:.11em;color:var(--faint)}.catalog-count{font-size:11px;color:var(--muted);margin:5px 0 0}.filter-list{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.filter-chip{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:var(--radius-pill);padding:9px 13px;font-size:10px;font-weight:600;cursor:pointer;transition:all .2s}.filter-chip:hover,.filter-chip.is-selected{background:var(--green);border-color:var(--accent);color:var(--accent-contrast)}.catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:24px}.catalog-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding-top:21px;margin-top:34px;color:var(--muted);font-size:11px}.detail-wrap{padding-top:32px;padding-bottom:90px}.breadcrumb{font-size:10px;color:var(--faint);display:flex;gap:10px;align-items:center;margin-bottom:27px}.breadcrumb a:hover{color:var(--green)}.breadcrumb span{color:var(--ghost)}.product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:start}.detail-image{background:var(--surface-3);border-radius:var(--radius-lg);overflow:hidden;padding:25px}.detail-image img{width:100%;aspect-ratio:1/1;object-fit:contain}.detail-label{font-size:9px;color:var(--faint);letter-spacing:.13em;text-transform:uppercase;font-weight:600}.detail-copy h1{font-family:var(--font-display);font-size:clamp(34px,4vw,48px);line-height:1.12;letter-spacing:-.06em;margin:13px 0}.detail-sku{font-size:10px;color:var(--faint);margin-bottom:20px}.detail-desc{font-size:13px;color:var(--muted);line-height:1.85}.detail-badges{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0}.detail-badges span{font-size:9px;background:var(--accent-tint);color:var(--ink-soft);padding:7px 10px;border-radius:var(--radius-sm)}.detail-specs{border-top:1px solid var(--line);margin-top:25px}.detail-specs h3{font-size:12px;margin:20px 0 11px}.spec-row{display:grid;grid-template-columns:130px 1fr;gap:15px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:11px}.spec-row span:first-child{color:var(--faint)}.spec-row span:last-child{color:var(--ink);font-weight:600}.detail-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}.detail-extra{margin-top:75px;padding-top:34px;border-top:1px solid var(--line)}.detail-extra h2{font-family:var(--font-display);font-size:29px;letter-spacing:-.05em;margin:0 0 10px}.detail-extra p{max-width:740px;font-size:12px;color:var(--muted);line-height:1.9}.related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}.back-to-products{display:inline-flex;gap:9px;color:var(--green);font-size:11px;font-weight:600;margin-top:25px}.content-narrow{max-width:900px}.about-content{text-align:center}.content-kicker{font-size:10px;letter-spacing:.15em;font-weight:600;color:var(--faint)}.about-content h2{font-size:clamp(34px,4.5vw,51px);margin:15px 0 22px}.large-body{font-size:17px;color:var(--ink-soft);line-height:1.8;max-width:790px}.about-content>p:not(.large-body){color:var(--muted);line-height:1.9;font-size:13px;max-width:800px}.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}.values-grid article{padding:23px 22px;background:var(--surface-3);border-radius:var(--radius-md)}.values-grid article>span{color:var(--gold);font-size:10px;font-weight:600;letter-spacing:.1em}.values-grid h3{font-size:14px;margin:15px 0 7px}.values-grid p{color:var(--muted);font-size:11px;line-height:1.7;margin:0}.placeholder-callout{display:flex;gap:17px;background:var(--gold-tint);border-radius:var(--radius-md);padding:20px;margin-top:35px}.callout-icon{background:var(--gold);color:var(--green);border-radius:var(--radius-md);width:39px;height:39px;display:grid;place-items:center;flex-shrink:0}.placeholder-callout strong{font-size:12px}.placeholder-callout p{font-size:11px;line-height:1.7;color:var(--muted);margin:5px 0 0}.factory-content>.section-heading{max-width:600px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:35px}.process-grid article{position:relative;padding:24px 20px;background:var(--surface-3);border-radius:var(--radius-md);min-height:235px}.process-number{font-size:9px;color:var(--faint);letter-spacing:.1em;font-weight:600}.process-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:var(--radius-md);background:var(--accent-tint);color:var(--green);font-size:21px;margin-top:18px}.process-grid h3{font-size:14px;margin:17px 0 7px}.process-grid p{font-size:10px;line-height:1.8;color:var(--muted);margin:0}.factory-photo-placeholder{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center;margin-top:70px;background:var(--surface-2);border-radius:var(--radius-lg);padding:28px}.factory-photo-placeholder img{border-radius:var(--radius-md);width:100%;max-height:310px;object-fit:cover}.factory-photo-placeholder h3{font-family:var(--font-display);font-size:28px;line-height:1.2;letter-spacing:-.05em;margin:14px 0 10px}.factory-photo-placeholder p{font-size:12px;color:var(--muted);line-height:1.85}.blog-list-grid{padding-top:5px;row-gap:35px}.blog-disclaimer{margin-top:38px;border-top:1px solid var(--line);padding-top:17px;font-size:10px;color:var(--faint);font-style:italic}.article-wrap{padding-top:40px;padding-bottom:90px;max-width:960px}.article-back{font-size:10px;color:var(--muted);font-weight:600;display:inline-flex;gap:8px;margin-bottom:25px}.article-header{max-width:790px;margin:0 auto 32px}.article-header .blog-meta{margin-bottom:15px}.article-header h1{font-family:var(--font-display);font-size:clamp(35px,5vw,55px);line-height:1.13;letter-spacing:-.06em;margin:0 0 15px}.article-lede{font-size:14px;color:var(--muted);line-height:1.8;margin:0 auto}.article-cover{width:100%;max-height:400px;object-fit:cover;background:var(--surface-3);border-radius:var(--radius-lg);margin-bottom:35px}.article-body{max-width:720px;margin:0 auto}.article-body p{font-size:13px;color:var(--ink-soft);line-height:2;margin:0 0 18px}.article-body h2{font-family:var(--font-display);font-size:25px;letter-spacing:-.04em;margin:30px 0 12px}.article-tip{background:var(--surface-2);border-left:3px solid var(--accent-quiet);padding:18px 20px;margin:25px 0;font-size:12px;color:var(--ink-soft);line-height:1.8}.article-cta{max-width:720px;margin:35px auto 0;padding:22px;background:var(--gold-tint);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:space-between;gap:20px}.article-cta strong{font-size:13px}.article-cta p{font-size:10px;color:var(--muted);margin:4px 0 0}.contact-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:start}.contact-info{padding-top:5px}.contact-info h2{font-size:42px;margin:15px 0}.contact-info>p{font-size:12px;color:var(--muted);line-height:1.85;max-width:310px}.contact-points{display:grid;gap:9px;margin-top:22px;color:var(--ink-soft);font-size:11px}.contact-points b{color:var(--gold);margin-right:8px}.contact-detail{display:flex;align-items:center;gap:13px;margin-top:24px}.detail-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:var(--radius-md);background:var(--accent-tint);color:var(--green);font-size:17px}.contact-detail small,.contact-detail strong{display:block}.contact-detail small{font-size:8px;letter-spacing:.13em;color:var(--faint);font-weight:600}.contact-detail strong{font-size:11px;margin-top:3px;font-weight:600}.contact-note{display:flex;gap:12px;background:var(--gold-tint);border-radius:var(--radius-md);padding:16px;margin-top:30px;max-width:360px}.contact-note>span{font-size:22px;color:var(--gold-ink)}.contact-note p{font-size:10px;line-height:1.7;color:var(--muted);margin:0}.inquiry-card{background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 45px var(--shadow-sm);border-radius:var(--radius-lg);padding:30px}.form-card-heading{border-bottom:1px solid var(--line-soft);padding-bottom:20px;margin-bottom:20px}.form-step{font-size:9px;letter-spacing:.12em;color:var(--faint);font-weight:600}.form-card-heading h2{font-family:var(--font-display);font-size:27px;line-height:1.15;letter-spacing:-.05em;margin:13px 0 8px}.form-card-heading h2 em{color:var(--accent-quiet)}.form-card-heading p{font-size:10px;color:var(--faint);margin:0}.inquiry-form label{display:block;font-size:10px;color:var(--ink-soft);font-weight:600}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:15px}.inquiry-form input:not([type=checkbox]),.inquiry-form textarea,.inquiry-form select{display:block;width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-sm);padding:12px 12px;color:var(--ink-soft);font-size:11px;margin-top:7px;outline:none;transition:border .2s,box-shadow .2s}.inquiry-form input::placeholder,.inquiry-form textarea::placeholder{color:var(--faint)}.inquiry-form input:focus,.inquiry-form textarea:focus,.inquiry-form select:focus{border-color:var(--line-strong);box-shadow:0 0 0 3px var(--focus-ring)}.inquiry-form textarea{resize:vertical;min-height:105px}.inquiry-form>label:not(.consent-check){margin-top:15px}.consent-check{display:flex!important;align-items:flex-start;gap:9px;margin-top:16px;font-weight:500!important;color:var(--muted)!important}.consent-check input{accent-color:var(--green);margin:3px 0 0}.button-submit{margin-top:20px;width:100%;justify-content:space-between;padding:15px 17px}.form-privacy{font-size:9px;color:var(--faint);line-height:1.6;margin:12px 0 0}.form-success{text-align:center;padding:38px 12px}.success-mark{margin:0 auto 16px;width:53px;height:53px;border-radius:50%;background:var(--accent-tint);color:var(--accent);display:grid;place-items:center;font-size:25px}.form-success h3{font-family:var(--font-display);font-size:22px;letter-spacing:-.04em;margin:0 0 8px}.form-success p{font-size:11px;line-height:1.8;color:var(--muted);max-width:365px;margin:0 auto 20px}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);background:var(--dark);color:var(--on-dark);font-size:12px;font-weight:600;padding:12px 18px;border-radius:var(--radius-md);box-shadow:var(--shadow);z-index:100;opacity:0;pointer-events:none;transition:all .25s;max-width:calc(100% - 28px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.empty-state{grid-column:1/-1;text-align:center;padding:55px 20px;background:var(--surface-3);border-radius:var(--radius-md);color:var(--muted)}.empty-state h3{font-family:var(--font-display);font-size:22px;color:var(--ink);margin:0 0 5px}.empty-state p{font-size:12px;margin:0}
@media(max-width:1100px){.main-nav{gap:17px}.nav-wrap{gap:22px}.nav-link{font-size:11px}.nav-cta{font-size:11px}.hero-grid{gap:20px}.hero-copy h1{font-size:58px}.service-grid{gap:10px}.service-item{padding-inline:2px}.category-card-title{display:block}.category-card-title span{display:block;text-align:left;margin-top:3px}.factory-teaser-grid{gap:45px}.footer-top{gap:35px}.product-detail-grid{gap:35px}}
@media(max-width:860px){.container{width:min(var(--container),calc(100% - 72px))}.nav-wrap{height:75px;gap:14px}.mobile-menu-toggle{display:block;margin-left:auto;order:3}.nav-cta{order:2;padding:10px 12px}.main-nav{display:none;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 18px 19px;box-shadow:0 20px 30px var(--shadow-md)}.main-nav.is-open{display:flex}.nav-link{display:block;padding:12px 6px;font-size:13px}.nav-dropdown{display:block;height:auto}.nav-dropdown>a{display:block}.dropdown-menu{position:static;display:block;width:100%;box-shadow:none;border:0;background:var(--surface-3);border-radius:var(--radius-md);margin-bottom:5px;padding:5px}.dropdown-menu a{padding:9px 12px}.hero-section{padding-top:40px}.hero-grid{grid-template-columns:1fr 1fr;min-height:400px;gap:10px}.hero-copy h1{font-size:48px}.hero-lede{font-size:13px}.hero-art-tag{padding:9px 11px}.tag-top{right:-5px;top:25px}.tag-bottom{left:-8px;bottom:20px}.hero-art-tag strong{font-size:9px}.hero-art-tag small{font-size:8px}.tag-icon,.tag-check{width:28px;height:28px}.section-padding{padding:69px 0}.service-grid{grid-template-columns:repeat(2,1fr);row-gap:20px}.service-item{padding:5px 8px}.category-grid{grid-template-columns:repeat(2,1fr)}.category-card{min-height:285px}.category-card img{height:170px}.product-grid,.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.factory-teaser-grid{grid-template-columns:1fr 1fr;gap:28px}.factory-stat-row{gap:7px}.factory-stat-row span{font-size:8px}.blog-grid{gap:15px}.blog-card h3{font-size:15px}.final-cta{gap:20px}.final-cta-icon{width:46px;height:46px;font-size:22px}.final-cta>.button{gap:10px}.footer-top{grid-template-columns:1.1fr .8fr .8fr;gap:30px}.footer-newsletter{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0 20px}.footer-newsletter .muted-label{grid-column:1/-1}.footer-newsletter h3{margin:9px 0}.footer-email{justify-self:end;width:100%}.social-dots{grid-column:1/-1}.interior-hero-grid{min-height:310px;gap:15px}.interior-hero h1{font-size:47px}.interior-hero-art img{height:240px}.floating-sticker{width:70px;height:70px;font-size:8px}.catalog-toolbar{align-items:flex-start;flex-direction:column;gap:15px}.filter-list{gap:7px}.product-detail-grid{gap:25px}.spec-row{grid-template-columns:110px 1fr}.related-grid{grid-template-columns:repeat(2,1fr)}.contact-layout{grid-template-columns:.75fr 1.25fr;gap:25px}.inquiry-card{padding:23px}.form-row{gap:10px}.process-grid{grid-template-columns:repeat(2,1fr)}.factory-photo-placeholder{gap:25px}}
@media(max-width:600px){.announcement-inner{height:auto;min-height:34px;padding-top:7px;padding-bottom:7px;gap:12px;font-size:9px}.announcement-right{display:none}.brand-mark{width:37px;height:37px}.brand-copy strong{font-size:18px}.brand-copy small{font-size:7px}.nav-cta{font-size:10px;padding:10px 11px;gap:7px}.nav-cta span{font-size:14px}.hero-section{padding-top:35px}.hero-grid{grid-template-columns:1fr;gap:8px}.hero-copy{padding-bottom:0}.hero-copy h1{font-size:48px;margin-top:19px}.hero-lede{font-size:13px;max-width:430px}.hero-actions{margin-top:22px;gap:18px;flex-wrap:wrap}.button-large{padding:14px 16px}.hero-micro-proof{margin-top:24px}.hero-art-wrap{width:min(100%,450px);margin:0 auto;padding:0 0 25px}.hero-art{max-height:none;width:100%}.tag-top{right:0;top:20px}.tag-bottom{left:0;bottom:20px}.hero-bottom{padding-top:7px;gap:9px}.hero-bottom>span:first-child{font-size:8px;white-space:nowrap}.hero-bottom-note{font-size:8px}.section-padding{padding:57px 0}.section-padding-sm{padding:22px 0}.service-grid{gap:13px 8px}.service-item{gap:9px;align-items:flex-start}.service-icon{width:37px;height:37px;border-radius:var(--radius-md);font-size:17px}.service-item h3{font-size:11px}.service-item p{font-size:9px}.heading-with-link{align-items:flex-start;flex-direction:column;gap:17px}.section-heading h2,.factory-copy h2,.about-content h2,.contact-info h2{font-size:37px}.section-heading{margin-bottom:25px}.category-grid{gap:10px}.category-card{min-height:239px;padding:12px 12px 0;border-radius:var(--radius-md)}.category-number{font-size:8px}.category-arrow{width:23px;height:23px;font-size:13px}.category-card img{height:133px;margin-top:5px}.category-card-title{padding:13px 12px;margin:0 -12px}.category-card-title h3{font-size:12px}.category-card-title span{font-size:8px}.product-grid,.catalog-grid{gap:11px}.product-card{border-radius:var(--radius-md)}.product-image-wrap img{aspect-ratio:1/1}.product-badge{top:8px;left:8px;padding:5px 7px;font-size:7px}.product-card-body{padding:11px 10px 10px}.product-category{font-size:8px}.product-card h3{font-size:12px}.product-card p{font-size:9px;min-height:42px}.product-card-foot{margin-top:10px;padding-top:9px;align-items:flex-start;flex-direction:column;gap:5px}.product-sku{font-size:8px}.product-inquiry{font-size:9px}.factory-teaser-grid{grid-template-columns:1fr;gap:31px}.factory-copy h2{margin-top:16px}.factory-copy>p:not(.demo-note){font-size:12px}.factory-stat-row{margin:20px 0}.factory-stat-row strong{font-size:19px}.factory-stat-row span{font-size:8px}.factory-visual>img{border-radius:var(--radius-md)}.blog-grid{grid-template-columns:1fr;gap:28px}.blog-card{display:grid;grid-template-columns:116px 1fr;column-gap:14px;align-items:start}.blog-image{grid-row:1/6;margin-bottom:0;border-radius:var(--radius-md)}.blog-image img{aspect-ratio:1/1}.blog-card .blog-meta{grid-column:2;margin:2px 0 5px;font-size:8px}.blog-card h3{grid-column:2;font-size:14px;margin-bottom:5px}.blog-card p{grid-column:2;font-size:10px;margin-bottom:6px}.blog-read{grid-column:2;font-size:9px}.final-cta{display:grid;grid-template-columns:42px 1fr;gap:16px;padding-top:46px;padding-bottom:46px;align-items:start}.final-cta-icon{width:42px;height:42px;margin-top:0}.final-cta h2{font-size:34px}.final-cta p{font-size:11px}.final-cta>.button{grid-column:2;margin:13px 0 0;justify-self:start}.cta-doodle{right:8px;top:-39px;font-size:85px}.doodle-two{right:3px;bottom:-55px;font-size:70px}.footer-top{grid-template-columns:1fr 1fr;gap:28px 18px;padding-top:40px;padding-bottom:31px}.footer-brand-col{grid-column:1/-1}.footer-newsletter{grid-column:1/-1;grid-template-columns:1fr;gap:0}.footer-newsletter h3{font-size:20px}.footer-email{justify-self:start;max-width:100%}.footer-bottom{align-items:flex-start;flex-direction:column;gap:9px;font-size:8px}.footer-bottom-right{width:100%;justify-content:space-between}.interior-hero-grid{grid-template-columns:1fr;gap:0;padding-top:37px;padding-bottom:18px}.interior-hero h1{font-size:46px}.interior-hero p{font-size:12px}.interior-hero-art{justify-self:center;width:min(100%,340px);margin-top:-5px}.interior-hero-art img{height:220px}.floating-sticker{right:2px;top:9px;width:65px;height:65px}.interior-body{padding-top:28px;padding-bottom:60px}.catalog-toolbar{padding-bottom:17px;margin-bottom:19px}.filter-list{gap:6px}.filter-chip{padding:8px 10px;font-size:9px}.catalog-bottom{align-items:flex-start;flex-direction:column}.detail-wrap{padding-top:24px;padding-bottom:60px}.breadcrumb{flex-wrap:wrap;font-size:9px;margin-bottom:20px}.product-detail-grid{grid-template-columns:1fr;gap:25px}.detail-image{padding:15px}.detail-copy h1{font-size:35px}.detail-desc{font-size:12px}.detail-extra{margin-top:50px;padding-top:27px}.related-grid{gap:11px}.about-content{padding-top:48px}.large-body{font-size:15px}.about-content>p:not(.large-body){font-size:12px}.values-grid{grid-template-columns:1fr;gap:9px;margin-top:28px}.values-grid article{padding:18px}.values-grid h3{margin:7px 0 4px}.placeholder-callout{padding:15px;gap:11px}.process-grid{grid-template-columns:1fr 1fr;gap:10px}.process-grid article{padding:17px 13px;min-height:220px}.process-icon{width:37px;height:37px}.process-grid h3{font-size:12px}.process-grid p{font-size:9px}.factory-photo-placeholder{grid-template-columns:1fr;padding:16px;gap:20px;margin-top:42px}.factory-photo-placeholder h3{font-size:24px}.article-wrap{padding-top:26px;padding-bottom:60px}.article-header h1{font-size:36px}.article-lede{font-size:12px}.article-cover{border-radius:var(--radius-md)}.article-body p{font-size:12px}.article-body h2{font-size:21px}.article-cta{flex-direction:column;align-items:flex-start;padding:17px}.contact-layout{grid-template-columns:1fr;gap:30px;padding-top:43px}.contact-info h2{font-size:37px}.contact-info>p{max-width:100%}.contact-points{grid-template-columns:1fr 1fr;gap:8px}.contact-detail{margin-top:17px}.contact-note{max-width:100%}.inquiry-card{padding:21px 15px;border-radius:var(--radius-md)}.form-card-heading h2{font-size:25px}.form-row{grid-template-columns:1fr;gap:13px;margin-bottom:13px}.inquiry-form textarea{min-height:95px}.form-success{padding:30px 4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* FAQ */
.faq-body{display:grid;gap:34px}
.faq-group{display:grid;gap:14px}
.faq-group-title{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.faq-list{display:grid;gap:10px}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:600;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex-shrink:0;font-size:20px;line-height:1;color:var(--green)}
.faq-item[open] summary::after{content:"\2013"}
.faq-answer{padding:16px 22px 20px;border-top:1px solid var(--line);color:var(--muted)}
.faq-answer p{margin:0 0 10px}
.faq-answer p:last-child{margin-bottom:0}
.faq-more{margin-top:18px}
.faq-section .faq-list{margin-top:22px}
.faq-cta{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--accent-tint);border-radius:var(--radius);padding:28px 32px}
.faq-cta strong{display:block;font-size:20px;color:var(--ink)}
.faq-cta p{margin:6px 0 0;color:var(--muted)}
.empty-inline{color:var(--muted)}

/* Certificates */
.certificates-section{display:grid;gap:26px}
.factory-content .certificates-section{margin-top:64px}
.certificate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.certificate-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.certificate-image{background:var(--cream);border-bottom:1px solid var(--line)}
.certificate-image img{width:100%;height:auto;display:block}
.certificate-copy{padding:18px 20px 22px;display:grid;gap:6px}
.certificate-copy h3{margin:0;font-size:16px}
.certificate-copy p{margin:0;font-size:14px;color:var(--muted)}
.certificate-issuer{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-2)}

/* Testimonials */
.testimonials-section{display:grid;gap:26px}
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.testimonial-card{display:flex;flex-direction:column;gap:20px;margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 22px}
.testimonial-quote{margin:0;font-size:15px;line-height:1.7;color:var(--ink)}
.testimonial-quote::before{content:"\201C";margin-right:2px;font-size:26px;line-height:0;vertical-align:-8px;color:var(--green)}
.testimonial-person{display:flex;align-items:center;gap:12px;margin-top:auto}
.testimonial-avatar{display:grid;place-items:center;flex-shrink:0;width:46px;height:46px;border-radius:var(--radius-pill);background:var(--accent-tint);color:var(--green);font-weight:600;overflow:hidden}
.testimonial-avatar img{width:100%;height:100%;object-fit:cover}
.testimonial-person strong{display:block;font-size:14px}
.testimonial-person small{font-size:13px;color:var(--muted)}

/* ============================================================
   编辑风精修层
   ────────────────────────────────────────────────────────────
   上一段是「换色」，这一段是「换气质」。针对原样式里带 AI 生成
   痕迹的几处特征逐条处理：
     · 闪光符 ✳ ✦ 与巨型涂鸦装饰   → 去掉
     · 旋转圆形贴纸                → 改成克制的方角标签
     · 20 余种随手圆角             → 收敛到 2-6px
     · 柔光晕影阴影                → 改成细描边 + 极淡投影
     · 标题负字距 -0.06em + 700/800 字重 → 衬线体 + 400/500 字重
     · 8-10px 的微型大写标签        → 提到 11px 并加大字距
   ============================================================ */

/* ── 全局排版基调 ─────────────────────────────────────── */
body{
  font-family:var(--font-sans);
  background:var(--paper);
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.72;
  letter-spacing:.005em}

/* 大标题一律走衬线体：这是「编辑感」与「AI 落地页」最大的分野 */
.hero-copy h1,.interior-hero h1,.section-heading h2,.factory-copy h2,
.about-content h2,.contact-info h2,.final-cta h2,.detail-copy h1,
.article-header h1,.detail-extra h2,.blog-card h3,.form-card-heading h2,
.empty-state h3,.faq-cta strong,.footer-newsletter h3,
.factory-photo-placeholder h3,.process-grid h3,.values-grid h3,
.brand-copy strong{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.012em}

/* 衬线体在小字号上会糊，正文小标题仍用无衬线体保证清晰 */
.blog-card h3,.process-grid h3,.values-grid h3,.footer-newsletter h3,
.certificate-copy h3,.detail-specs h3,.faq-cta strong{
  font-family:var(--font-sans);
  font-weight:600;
  letter-spacing:0}

/* ── 首页 Hero ────────────────────────────────────────── */
.hero-copy h1{
  font-size:clamp(40px,4.6vw,64px);
  line-height:1.1;
  margin:26px 0 22px}
h1 em,h2 em{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  color:var(--accent-quiet);
  letter-spacing:-.01em}
.hero-lede{
  color:var(--muted);
  font-size:16px;
  line-height:1.85;
  max-width:470px}
.hero-section{background:var(--paper);padding-top:84px}
.hero-grid{min-height:auto;gap:56px;align-items:center}
.hero-art{filter:none}
.hero-micro-proof strong{font-size:12px;font-weight:600}
.hero-micro-proof small{color:var(--faint);font-size:11px}
.hero-bottom{color:var(--faint);letter-spacing:.16em;font-size:10px}
.hero-bottom>span:first-child{color:var(--muted)}
.hero-bottom-line{background:var(--line)}
.hero-bottom-note{letter-spacing:.02em;font-size:11px}

/* 浮在产品图上的两个小卡片：去掉彩色方块图标与投影，改成白卡+细线 */
.hero-art-tag{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  border-radius:var(--radius-sm);
  padding:13px 16px}
.hero-art-tag strong{font-size:12px;font-weight:600;color:var(--ink)}
.hero-art-tag small{font-size:11px;color:var(--muted)}
.tag-icon,.tag-check{
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-xs);
  width:26px;
  height:26px;
  font-size:12px;
  color:var(--accent)}
.tag-check{border-color:var(--line-strong)}

/* 闪光符 ✳ ✦ 与结尾 CTA 的巨型涂鸦：直接去掉，这是最重的 AI 味来源 */
.hero-spark,.cta-doodle{display:none}

/* ── 小标签（eyebrow / kicker / muted-label）────────────
   原来 8-10px，尺寸偏小且字距不足；提到 11px 并放大字距，
   大写 + 宽字距是高端版式的标准做法。 */
.eyebrow,.content-kicker,.muted-label,.form-step,.detail-label,
.category-number,.product-category,.blog-meta,.footer-col h4,
.certificate-issuer,.final-cta .eyebrow{
  font-size:11px;
  letter-spacing:.2em;
  font-weight:600;
  text-transform:uppercase}
.eyebrow{color:var(--muted);gap:12px}
.eyebrow-line{width:34px;height:1px;background:var(--gold)}
.eyebrow-light{color:var(--on-dark-soft)}

/* 公告条上的小圆点 → 一条金色短横线，更冷静 */
.announcement-dot,.label-dot{
  width:18px;
  height:1px;
  border-radius:0;
  background:var(--gold);
  vertical-align:3px;
  margin-right:10px}

/* ── 按钮：方角、大写、宽字距，取消上浮动效 ───────────── */
.button{
  border-radius:var(--radius-xs);
  font-family:var(--font-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:15px 24px;
  gap:14px;
  transition:background .25s,color .25s,border-color .25s}
.button:hover{transform:none;box-shadow:none;background:var(--accent-dark)}
.button span{font-size:14px;font-weight:400;letter-spacing:0}
.button-large{padding:17px 28px;font-size:11.5px}
.button-light{background:var(--gold-tint);color:var(--ink)}
.button-light:hover{background:var(--surface);color:var(--ink)}
.button-outline{border-color:var(--line-strong);color:var(--accent)}
.button-outline:hover{background:var(--accent-tint)}
.nav-cta{padding:12px 18px;gap:10px}
.button-submit{padding:17px 22px}

/* 文字链接：细一点、字距放开。
   用 --accent-text 而不是 --accent：强调色可能很亮（如霓虹粉），
   当小字号文字放在浅底上对比度不够，各主题都提供一个"够深的强调色"专供文字。 */
.text-link{
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  gap:10px;
  color:var(--accent-text)}
.text-link span{font-size:14px}
.blog-read,.product-inquiry,.back-to-products,.article-back{
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent-text)}

/* ── 导航 ─────────────────────────────────────────────── */
.announcement-bar{
  background:var(--dark);
  color:var(--on-dark);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase}
.announcement-right{color:var(--on-dark-soft)}
.site-header{
  background:var(--header-bg);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px)}
.nav-wrap{height:78px;gap:36px}
.brand{gap:11px;color:var(--ink)}
.brand-mark{
  width:40px;
  height:40px;
  background:var(--accent);
  color:var(--accent-contrast);
  border-radius:var(--radius-xs);
  padding:8px}
.brand-footer .brand-mark{background:var(--accent);color:var(--accent-contrast)}
.brand-logo{width:40px;height:40px}
/* 页头 Logo（2026-10-14）：原方形图上下留白太大，显示高拉满也只有中间一条；
   换成裁掉留白的横版图（≈2.2:1）后，宽随比例，max-width 防止以后换更宽的图
   撑爆导航。60px 在 78px 导航条里上下各留 9px 呼吸（等高 78px 用户反馈偏大）。 */
.site-header .brand-logo{width:auto;height:60px;max-width:220px}
/* 页脚同一张横版图：40px 方框 contain 会把图形压成一条细带，放开宽度、高度对齐 40px。 */
.brand-footer .brand-logo{width:auto;height:40px;max-width:160px}
.brand-copy strong{font-size:21px;font-weight:500;letter-spacing:.005em}
.brand-copy small{
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.28em;
  color:var(--muted);
  margin-top:6px}
.nav-link{
  color:var(--ink-soft);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase}
.nav-link:hover,.nav-link.is-current{color:var(--accent-text)}
.dropdown-menu{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  padding:8px}
.dropdown-menu a{
  border-radius:var(--radius-xs);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--ink-soft)}
.dropdown-menu a:hover{background:var(--surface-2);color:var(--accent-text)}
.dropdown-menu span{color:var(--accent)}
.chevron{font-size:12px}

/* ── 区块节奏：2026-10-14 两轮收紧 —— 原 112px 让相邻模块间隔达 224px，
   用户反馈过大；112 → 88 后仍偏大，再收 88 → 72（相邻间隔 144px）。
   断点同步：80 → 52、62 → 40。 ───────────────────── */
.section-padding{padding:72px 0}
.section-padding-sm{padding:34px 0}
.section-heading{margin-bottom:44px}
.section-intro{
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
  max-width:520px;
  margin:18px 0 0}
.heading-with-link{gap:44px}

/* 交替区块底：不再用不同的浅绿/浅黄，统一为暖中性 */
.service-strip{background:var(--surface);border-bottom:1px solid var(--line)}
.categories-section,.blog-section{background:var(--paper)}
.products-section{background:var(--surface-2)}
.factory-teaser{background:var(--surface-2)}
.site-footer{background:var(--surface-2)}

/* ── 服务条：去糖果色方块，改为细框图标 ───────────────── */
.service-grid{gap:30px}
.service-item{align-items:flex-start;gap:15px;padding:0}
.service-icon{
  width:38px;
  height:38px;
  background:transparent!important;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-xs);
  color:var(--accent)!important;
  font-size:16px}
.service-item h3{font-size:14px;font-weight:600;letter-spacing:0;margin:0 0 6px}
.service-item p{font-size:12.5px;line-height:1.65;color:var(--muted);max-width:210px}

/* ── 分类卡：四种马卡龙底色 → 统一暖亚麻，靠细描边分层 ── */
.category-grid{gap:20px}
.category-card{
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  padding:20px 20px 0;
  min-height:320px;
  transition:border-color .25s,background .25s}
.category-dog,.category-cat,.category-toys,.category-travel{background:var(--surface-3)}
.category-card:hover{background:var(--surface-2);border-color:var(--line-strong)}
.category-card-top{position:relative;z-index:2}
.category-arrow{
  width:26px;
  height:26px;
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-xs);
  color:var(--accent-text);
  font-size:12px}
.category-card img{height:180px}
.category-card-title{
  background:var(--surface);
  border-top:1px solid var(--line);
  margin:0 -20px;
  padding:18px 20px}
.category-card-title h3{font-size:14px;font-weight:600;letter-spacing:0}
.category-card-title span{
  color:var(--muted);
  font-size:10.5px;
  letter-spacing:.06em;
  line-height:1.4}

/* ── 产品卡 ───────────────────────────────────────────── */
.product-grid{gap:22px}
.product-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md)}
.product-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--line-strong)}
.product-image-wrap,
.product-card:nth-child(4n+2) .product-image-wrap,
.product-card:nth-child(4n+3) .product-image-wrap,
.product-card:nth-child(4n+4) .product-image-wrap{background:var(--surface-3)}
.product-image-wrap img{aspect-ratio:1.2/1}
.product-badge{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-xs);
  backdrop-filter:none;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--accent-text);
  padding:5px 9px}
.product-card-body{padding:18px 18px 16px}
.product-card h3{
  font-family:var(--font-sans);
  font-size:15px;
  font-weight:600;
  letter-spacing:0;
  line-height:1.4}
.product-card p{font-size:12.5px;color:var(--muted);min-height:38px}
.product-card-foot{border-top:1px solid var(--line-soft);margin-top:16px;padding-top:14px}
.product-sku{font-size:10.5px;color:var(--faint);letter-spacing:.06em}
.product-category{color:var(--accent-text);font-size:10px;margin-bottom:8px}

/* ── 工厂 / 关于区块 ──────────────────────────────────── */
.factory-teaser-grid{gap:84px}
.factory-visual>img{
  border-radius:var(--radius-md);
  box-shadow:none;
  border:1px solid var(--line)}
.factory-image-label{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-xs);
  padding:13px 16px;
  letter-spacing:.16em;
  font-size:10px;
  color:var(--accent-text)}
.factory-copy>p:not(.demo-note){
  color:var(--muted);
  font-size:14.5px;
  line-height:1.9;
  max-width:500px}
.factory-stat-row{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:26px 0;
  margin:32px 0}
.factory-stat-row strong{
  font-family:var(--font-display);
  font-size:30px;
  font-weight:400;
  letter-spacing:0;
  color:var(--accent)}
.factory-stat-row span{
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:8px}
.demo-note{color:var(--faint);font-size:11px}

/* 关于页的价值卡 / 工厂页的流程卡：去掉色块，改细线上分割 */
.values-grid{gap:0;border-top:1px solid var(--line);margin-top:52px}
.values-grid article{
  background:transparent;
  border-radius:0;
  border-right:1px solid var(--line);
  padding:30px 28px 30px 0;
  margin-right:28px}
.values-grid article:last-child{border-right:0;margin-right:0;padding-right:0}
.values-grid article>span{color:var(--gold-ink);font-size:11px;letter-spacing:.18em}
.values-grid h3{font-size:15px;margin:16px 0 8px}
.values-grid p{color:var(--muted);font-size:13px;line-height:1.75}

.process-grid{gap:0;border-top:1px solid var(--line);margin-top:48px}
.process-grid article{
  background:transparent;
  border-radius:0;
  border-right:1px solid var(--line);
  padding:30px 26px 30px 0;
  margin-right:26px;
  min-height:250px}
.process-grid article:last-child{border-right:0;margin-right:0;padding-right:0}
.process-number{color:var(--gold-ink);font-size:11px;letter-spacing:.18em}
/* 流程卡已经用 01-04 编号了，图标属于重复装饰，直接不显示 */
.process-icon{display:none}
.process-grid p{color:var(--muted);font-size:12.5px;line-height:1.8}

.large-body{font-size:18px;line-height:1.8;color:var(--ink-soft);max-width:760px}
.placeholder-callout{
  background:var(--gold-tint);
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  padding:24px}
.callout-icon{
  background:transparent;
  border:1px solid var(--gold);
  border-radius:var(--radius-xs);
  color:var(--gold-ink)}
.factory-photo-placeholder{
  background:var(--surface-2);
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  padding:32px}
.factory-photo-placeholder img{border-radius:var(--radius-sm)}

/* ── 首页的客户评价 / 证书 ────────────────────────────── */
.certificate-card,.testimonial-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md)}
.certificate-image{background:var(--surface-3)}
.testimonial-quote{
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  letter-spacing:-.005em}
.testimonial-quote::before{color:var(--gold);font-size:30px;vertical-align:-10px}
.testimonial-avatar{
  background:var(--surface-3);
  color:var(--accent-text);
  border:1px solid var(--line);
  font-size:13px}
.testimonial-person strong{font-size:14px;font-weight:600}
.testimonial-person small{color:var(--muted);font-size:12px}

/* ── FAQ ──────────────────────────────────────────────── */
.faq-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md)}
.faq-item summary{font-size:15px;font-weight:500;padding:22px 26px;color:var(--ink)}
.faq-item summary::after{color:var(--gold);font-size:18px}
.faq-answer{padding:4px 26px 24px;color:var(--muted);font-size:14px;line-height:1.85}
.faq-group-title{color:var(--gold-ink);font-size:11px;letter-spacing:.2em}
.faq-cta{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:32px 36px}

/* ── 结尾 CTA：深底区块，去掉装饰只留细金线 ───────────── */
.final-cta-section{background:var(--dark);color:var(--on-dark)}
.final-cta{padding-top:76px;padding-bottom:76px;gap:0}
.final-cta-icon{display:none}
.final-cta h2{
  color:var(--on-dark);
  font-size:clamp(32px,3.8vw,48px);
  line-height:1.12;
  margin:16px 0 12px}
.final-cta h2 em{color:var(--gold);font-style:italic}
.final-cta p{color:var(--on-dark-soft);font-size:14.5px;max-width:520px}
.final-cta .eyebrow{color:var(--on-dark-soft)}
.final-cta .eyebrow-line{background:var(--gold)}
.final-cta>.button{
  background:transparent;
  border:1px solid var(--on-dark-soft);
  color:var(--on-dark);
  margin-left:auto}
.final-cta>.button:hover{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}

/* ── 页脚 ─────────────────────────────────────────────── */
.footer-top{gap:72px;padding-top:72px;padding-bottom:60px}

/* 页脚外链栏（2026-10-23）——后台第 04 组里的 4 组「文字 + 网址」。
   列数只在真有外链时才从 4 变 5（模板给 .footer-top 加 has-external-links），
   全部留空时页脚与改动前完全一致，不会平白多出空栏位。
   ⚠ 因为选择器多了一个类，窄屏必须逐档把列数写回来，
   否则会盖掉基础层的 3 列 / 2 列布局。 */
.footer-top.has-external-links{grid-template-columns:1.22fr .7fr .7fr .72fr 1.08fr}
@media(max-width:1100px){
  /* 多一栏后水平余量变小，间距比原来的 44px 再收一点 */
  .footer-top.has-external-links{gap:24px}
}
@media(max-width:860px){
  .footer-top.has-external-links{grid-template-columns:1.1fr .8fr .8fr .8fr}
}
@media(max-width:600px){
  /* 与基础层同口径：2 列，品牌行与联系栏各占满一行 */
  .footer-top.has-external-links{grid-template-columns:1fr 1fr}
}
.footer-brand-col>p{color:var(--muted);font-size:13px;line-height:1.9}
.footer-col h4{color:var(--faint);margin:8px 0 20px}
.footer-col a{font-size:13px;color:var(--ink-soft);margin:12px 0}
.footer-col a:hover,.footer-bottom a:hover{color:var(--gold-ink)}
.footer-newsletter h3{font-size:22px;margin:14px 0}
.footer-email{
  border-bottom:1px solid var(--line-strong);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--accent-text);
  padding:12px 0}
.footer-email span{font-size:14px}
.social-dots a{
  border:1px solid var(--line-strong);
  color:var(--muted);
  border-radius:var(--radius-xs);
  width:28px;
  height:28px;
  font-size:10px;
  letter-spacing:.04em}
.footer-bottom{
  border-top:1px solid var(--line);
  color:var(--faint);
  font-size:10.5px;
  letter-spacing:.08em;
  padding:22px 0 26px}
.footer-bottom a{color:var(--muted)}

/* ── 内页 Hero ────────────────────────────────────────── */
.interior-hero{background:var(--surface-2);border-bottom:1px solid var(--line)}
.interior-hero-grid{min-height:330px;gap:64px}
.interior-hero h1{font-size:clamp(38px,4.6vw,58px);line-height:1.1;margin:22px 0 20px}
.interior-hero p{color:var(--muted);font-size:15px;line-height:1.85;max-width:520px}

/* 旋转的圆形贴纸 → 方角细框标签，不再旋转 */
.floating-sticker{
  width:auto;
  height:auto;
  min-width:0;
  background:var(--surface);
  color:var(--accent);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-xs);
  transform:none;
  font-size:10px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:11px 15px;
  right:0;
  top:18px;
  display:block;
  white-space:nowrap;
  line-height:1.2}
.floating-sticker br{display:none}

/* ── 目录 / 筛选器 ────────────────────────────────────── */
.catalog-toolbar{border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:30px}
.catalog-count{color:var(--muted);font-size:12.5px}
.filter-chip{
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink-soft);
  border-radius:var(--radius-xs);
  padding:10px 16px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase}
.filter-chip:hover,.filter-chip.is-selected{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-contrast)}
.catalog-bottom{border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}

/* ── 产品详情 ─────────────────────────────────────────── */
.detail-image{
  background:var(--surface-3);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:30px}
.breadcrumb{color:var(--faint);font-size:11px;letter-spacing:.06em}
.breadcrumb span{color:var(--ghost)}
.detail-copy h1{font-size:clamp(32px,3.8vw,46px);line-height:1.12;margin:16px 0}
.detail-sku{color:var(--faint);font-size:11.5px}
.detail-desc{color:var(--muted);font-size:14.5px;line-height:1.85}
.detail-badges span{
  background:var(--accent-tint);
  color:var(--accent-2);
  border-radius:var(--radius-xs);
  font-size:10.5px;
  letter-spacing:.08em;
  padding:8px 12px}
.spec-row{
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
  padding:13px 0}
.spec-row span:first-child{color:var(--faint)}
.spec-row span:last-child{color:var(--ink);font-weight:500}
.detail-extra{margin-top:88px;padding-top:42px;border-top:1px solid var(--line)}
.detail-extra h2{font-size:32px}
.detail-extra p{color:var(--muted);font-size:14px;line-height:1.9}

/* ── 博客 ─────────────────────────────────────────────── */
.blog-grid{gap:30px}
.blog-image{
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:var(--surface-3);
  margin-bottom:20px}
.blog-card h3{font-size:18px;line-height:1.4;margin:0 0 11px;letter-spacing:-.005em}
.blog-card h3 a:hover{color:var(--accent)}
.blog-card p{color:var(--muted);font-size:13.5px;line-height:1.75;margin:0 0 15px}
.blog-meta{color:var(--faint);font-size:10px;margin-bottom:11px}
.blog-meta .meta-dot{background:var(--gold);border-radius:0;width:14px;height:1px}
.blog-disclaimer{border-top:1px solid var(--line);color:var(--faint);font-size:11px}
.article-header h1{font-size:clamp(34px,4.6vw,52px);line-height:1.13}
.article-header p{color:var(--muted);font-size:15.5px;line-height:1.8}
.article-cover{border-radius:var(--radius-md);border:1px solid var(--line)}
.article-body p{color:var(--ink-soft);font-size:15.5px;line-height:1.95;margin:0 0 22px}
.article-body h2{font-family:var(--font-display);font-weight:400;font-size:28px;letter-spacing:-.01em}
.article-tip{
  background:var(--surface-2);
  border-left:2px solid var(--gold);
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.85;
  padding:22px 26px;
  border-radius:0}
.article-cta{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:26px 28px}
.article-cta p{color:var(--muted);font-size:12px}

/* ── 联系 / 询盘表单 ──────────────────────────────────── */
.contact-layout{gap:84px}
.contact-info h2{font-size:40px;line-height:1.12}
.contact-info>p{color:var(--muted);font-size:14px;line-height:1.85;max-width:330px}
.contact-points{color:var(--ink-soft);font-size:13px}
.contact-points b{color:var(--gold);font-weight:400;margin-right:10px}
.contact-detail{gap:0}
/* 右侧小字段（EMAIL / PHONE / ADDRESS）本身已有文字标签，图标属于重复信息 */
.detail-icon{display:none}
.contact-detail small{color:var(--faint);font-size:9.5px;letter-spacing:.18em}
.contact-detail strong{font-size:13px;font-weight:600}
.contact-note{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-md);
  padding:20px 22px}
.contact-note>span{color:var(--gold)}
.contact-note p{color:var(--muted);font-size:12.5px;line-height:1.7}

.inquiry-card{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:none;
  border-radius:var(--radius-md);
  /* 只收卡片顶部内边距 38→30（左右/底仍 38）：去掉 INQUIRY FORM 那行后
     卡片上方显得偏空。配合下面 .form-card-heading h2:first-child 去掉标题死边距。 */
  padding:30px 38px 38px}
.form-card-heading{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:26px}
.form-card-heading h2{font-size:30px;font-weight:400}
/* 去掉小眉题（.form-step 空）时，h2 成了 form-card-heading 首个子元素，
   它继承的 margin-top:13px 会变成标题上方的死空档，这里归零。
   有眉题时 h2 不是 first-child，那 13px 仍是眉题与标题的正常间距。 */
.form-card-heading h2:first-child{margin-top:0}
.form-card-heading h2 em{color:var(--accent-quiet);font-style:italic}
.form-card-heading p{color:var(--muted);font-size:12.5px}
.inquiry-form label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft)}
.inquiry-form input:not([type=checkbox]),.inquiry-form textarea,.inquiry-form select{
  border:1px solid var(--line-strong);
  background:var(--surface);
  border-radius:var(--radius-xs);
  color:var(--ink);
  font-size:14px;
  padding:14px 15px;
  letter-spacing:0;
  text-transform:none;
  transition:border-color .2s,box-shadow .2s}
.inquiry-form input::placeholder,.inquiry-form textarea::placeholder{color:var(--faint)}
.inquiry-form input:focus,.inquiry-form textarea:focus,.inquiry-form select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus-ring)}
.consent-check{color:var(--muted)!important;font-size:12.5px!important;letter-spacing:0;text-transform:none}
.form-privacy{color:var(--faint);font-size:10.5px}
.form-success h3{font-family:var(--font-display);font-weight:400;font-size:26px}
.form-success p{color:var(--muted);font-size:14px}
.success-mark{
  background:var(--accent-tint);
  color:var(--accent-text);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  width:48px;
  height:48px;
  font-size:20px}

/* ── 提示条 / 空状态 ──────────────────────────────────── */
.toast{
  background:var(--dark);
  color:var(--on-dark);
  border-radius:var(--radius-xs);
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  padding:14px 22px;
  box-shadow:var(--shadow-lg)}
.empty-state{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  color:var(--muted)}
.empty-state h3{font-family:var(--font-display);font-weight:400;font-size:24px}

/* ── 焦点可见性（键盘操作）───────────────────────────── */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px}

/* ============================================================
   响应式：原样式表在断点里写死了标题字号，这里同步覆盖，
   否则精修层的 clamp() 会在小屏上把尺寸顶回去。
   ============================================================ */
@media(max-width:1100px){
  .hero-copy h1{font-size:clamp(36px,5.2vw,54px)}
  .factory-teaser-grid{gap:52px}
  .footer-top{gap:44px}
}
@media(max-width:860px){
  .nav-wrap{height:70px}
  /* 横版图比方形宽：601–860px 区间要给搜索框和汉堡留横位，收一档 */
  .site-header .brand-logo{height:52px}
  .hero-copy h1{font-size:clamp(33px,6.4vw,46px)}
  .interior-hero h1{font-size:clamp(32px,6vw,44px)}
  .section-padding{padding:52px 0}
  .section-heading h2,.factory-copy h2,.about-content h2,.contact-info h2{font-size:clamp(30px,5.4vw,40px)}
  .values-grid article,.process-grid article{
    border-right:0;
    margin-right:0;
    padding:26px 0;
    border-bottom:1px solid var(--line)}
  .values-grid article:last-child,.process-grid article:last-child{border-bottom:0}
  .contact-layout{gap:44px}
}
@media(max-width:600px){
  .hero-copy h1{font-size:clamp(29px,8.6vw,40px)}
  .interior-hero h1{font-size:clamp(27px,7.6vw,36px)}
  .detail-copy h1{font-size:clamp(26px,7vw,34px)}
  .article-header h1{font-size:clamp(26px,7vw,34px)}
  .final-cta h2{font-size:clamp(26px,7.4vw,34px)}
  .contact-info h2{font-size:34px}
  .section-heading h2,.factory-copy h2,.about-content h2{font-size:clamp(26px,6.6vw,34px)}
  .section-padding{padding:40px 0}
  .values-grid,.process-grid{border-top:1px solid var(--line)}
  .final-cta{padding-top:60px;padding-bottom:60px}
  .inquiry-card{padding:26px 20px}
  .footer-top{padding-top:56px}
  /* 窄屏页头只留图形 Logo（42px 高 ≈ 93px 宽）：横版图比方形宽，500px 视口
     下导航横向余量只剩 22px（见「≤600px 页头的横向溢出」一节），品牌文字
     （.brand-copy）会挤出横向滚动条，这里隐藏；页脚品牌行仍有全名。 */
  .site-header .brand-logo{height:42px}
  .site-header .brand-copy{display:none}
}

/* ============================================================
   静海蓝 × 霓虹粉 专属装饰
   ────────────────────────────────────────────────────────────
   这套配色饱和度高、明度跨度大，光换令牌会显得"只是换了颜色"。
   这里补几处只在 ocean-pink 下生效的形状语言，让它看起来是
   为这套配色专门设计过的：
     · 首屏铺满霞光粉，一进站就是粉+蓝的关系
     · 按钮改成胶囊形（霓虹粉 + 胶囊是这一路配色的常见语汇）
     · 标签线加粗到 2px，细线在鲜艳底色上会被吃掉
   ============================================================ */
html[data-theme="ocean-pink"] .hero-section{background:var(--surface-2)}
html[data-theme="ocean-pink"] .service-strip{background:var(--surface)}
html[data-theme="ocean-pink"] .categories-section{background:var(--paper)}
html[data-theme="ocean-pink"] .products-section{background:var(--surface)}
html[data-theme="ocean-pink"] .factory-teaser{background:var(--surface-2)}
html[data-theme="ocean-pink"] .testimonials-section{background:var(--paper)}
html[data-theme="ocean-pink"] .certificates-section{background:var(--paper)}
html[data-theme="ocean-pink"] .blog-section{background:var(--surface-2)}
html[data-theme="ocean-pink"] .site-footer{background:var(--dark);color:var(--on-dark)}
/* 服务条图标走静海蓝：这一条紧跟在粉色首屏下面，
   图标再用粉色会让首屏下方整片都是粉，加一点深蓝才有停顿 */
html[data-theme="ocean-pink"] .service-icon{color:var(--ink)!important;border-color:var(--ink)}
html[data-theme="ocean-pink"] .product-card h3{color:var(--ink)}

html[data-theme="ocean-pink"] .button{border-radius:var(--radius-pill);padding:15px 28px}
html[data-theme="ocean-pink"] .button-large{padding:17px 32px}
html[data-theme="ocean-pink"] .nav-cta{padding:12px 22px}
html[data-theme="ocean-pink"] .filter-chip{border-radius:var(--radius-pill);padding:10px 18px}
html[data-theme="ocean-pink"] .eyebrow-line{height:2px}
html[data-theme="ocean-pink"] .category-card,
html[data-theme="ocean-pink"] .product-card,
html[data-theme="ocean-pink"] .testimonial-card,
html[data-theme="ocean-pink"] .certificate-card,
html[data-theme="ocean-pink"] .faq-item,
html[data-theme="ocean-pink"] .inquiry-card{border-radius:10px}
html[data-theme="ocean-pink"] .blog-image,
html[data-theme="ocean-pink"] .detail-image,
html[data-theme="ocean-pink"] .article-cover{border-radius:10px}

/* 深蓝页脚里的文字要跟着换色，否则会掉进背景 */
html[data-theme="ocean-pink"] .footer-brand-col>p,
html[data-theme="ocean-pink"] .footer-col a,
html[data-theme="ocean-pink"] .footer-bottom a{color:var(--on-dark-soft)}
html[data-theme="ocean-pink"] .footer-col h4,
html[data-theme="ocean-pink"] .muted-label{color:var(--on-dark-soft)}
html[data-theme="ocean-pink"] .footer-newsletter h3,
html[data-theme="ocean-pink"] .footer-email{color:var(--on-dark)}
html[data-theme="ocean-pink"] .footer-col a:hover,
html[data-theme="ocean-pink"] .footer-bottom a:hover{color:var(--accent)}
html[data-theme="ocean-pink"] .footer-email{border-bottom-color:rgba(255,255,255,.28)}
html[data-theme="ocean-pink"] .footer-bottom{border-top-color:rgba(255,255,255,.14);color:var(--on-dark-soft)}
html[data-theme="ocean-pink"] .social-dots a{border-color:rgba(255,255,255,.28);color:var(--on-dark-soft)}
html[data-theme="ocean-pink"] .brand-footer .brand-copy strong{color:var(--on-dark)}
html[data-theme="ocean-pink"] .brand-footer .brand-copy small{color:var(--on-dark-soft)}
html[data-theme="ocean-pink"] .brand-footer .brand-mark{background:var(--accent);color:var(--accent-contrast)}

/* ════════════════════════════════════════════════════════════════
   主题五：翠绿活力风 —— 专属装饰（只在 emerald 下生效）
   配色骨架取自 ueeshop：翠绿 #0DB083 打底、琥珀 #FECE2E 点缀、
   深墨绿做骨架与页脚。区块底色按 surface / surface-2 / paper 混排，
   避免整页一种绿；按钮走胶囊，卡片比静海蓝那套再圆一点（更亲和）。
   ════════════════════════════════════════════════════════════════ */

html[data-theme="emerald"] .hero-section{background:var(--surface-2)}
html[data-theme="emerald"] .service-strip{background:var(--surface)}
html[data-theme="emerald"] .categories-section{background:var(--paper)}
html[data-theme="emerald"] .products-section{background:var(--surface)}
html[data-theme="emerald"] .factory-teaser{background:var(--surface-2)}
html[data-theme="emerald"] .testimonials-section{background:var(--paper)}
html[data-theme="emerald"] .certificates-section{background:var(--paper)}
html[data-theme="emerald"] .blog-section{background:var(--surface-2)}

/* 服务条图标走深翠绿而不是品牌亮绿：
   亮绿在白底上只有 2.78:1，当「图形」也偏淡；
   深翠绿 #067A59 有 5.34:1，在白底和薄荷底上都立得住。 */
html[data-theme="emerald"] .service-icon{color:var(--accent-2)!important;border-color:var(--accent-2)}
html[data-theme="emerald"] .product-card h3{color:var(--ink)}

/* 按钮：胶囊。翠绿底 + 深墨绿字（对比度 5.22:1），不用白字 */
html[data-theme="emerald"] .button{border-radius:var(--radius-pill);padding:15px 28px}
html[data-theme="emerald"] .button-large{padding:17px 32px}
html[data-theme="emerald"] .nav-cta{padding:12px 22px}
html[data-theme="emerald"] .filter-chip{border-radius:var(--radius-pill);padding:10px 18px}
html[data-theme="emerald"] .eyebrow-line{height:2px}
html[data-theme="emerald"] .category-card,
html[data-theme="emerald"] .product-card,
html[data-theme="emerald"] .testimonial-card,
html[data-theme="emerald"] .certificate-card,
html[data-theme="emerald"] .faq-item,
html[data-theme="emerald"] .inquiry-card{border-radius:12px}
html[data-theme="emerald"] .blog-image,
html[data-theme="emerald"] .detail-image,
html[data-theme="emerald"] .article-cover{border-radius:12px}

/* 深墨绿页脚里的文字要跟着换色，否则会掉进背景 */
html[data-theme="emerald"] .site-footer{background:var(--dark);color:var(--on-dark)}
html[data-theme="emerald"] .footer-brand-col>p,
html[data-theme="emerald"] .footer-col a,
html[data-theme="emerald"] .footer-bottom a{color:var(--on-dark-soft)}
html[data-theme="emerald"] .footer-col h4,
html[data-theme="emerald"] .muted-label{color:var(--on-dark-soft)}
html[data-theme="emerald"] .footer-newsletter h3,
html[data-theme="emerald"] .footer-email{color:var(--on-dark)}
html[data-theme="emerald"] .footer-col a:hover,
html[data-theme="emerald"] .footer-bottom a:hover{color:var(--accent)}
html[data-theme="emerald"] .footer-email{border-bottom-color:rgba(255,255,255,.28)}
html[data-theme="emerald"] .footer-bottom{border-top-color:rgba(255,255,255,.14);color:var(--on-dark-soft)}
html[data-theme="emerald"] .social-dots a{border-color:rgba(255,255,255,.28);color:var(--on-dark-soft)}
html[data-theme="emerald"] .brand-footer .brand-copy strong{color:var(--on-dark)}
html[data-theme="emerald"] .brand-footer .brand-copy small{color:var(--on-dark-soft)}
html[data-theme="emerald"] .brand-footer .brand-mark{background:var(--accent);color:var(--accent-contrast)}

/* ════════════════════════════════════════════════════════════════
   主题八专属装饰 —— 活力橙（tangerine）
   ────────────────────────────────────────────────────────────
   · 区块底色交替：首屏/工厂/博客吃 --surface-2，其余 --paper/--surface。
   · 页脚吃 --dark 深蓝底（#082A47），页脚全套覆盖照翠绿。
   · 公告条 accent 底 + 白字不达标（3.44），改走深蓝 --dark 底。
   · 小字强调覆盖（text-link / 角标 / 图标方块）再保险一层。 */

html[data-theme="tangerine"] .hero-section{background:var(--surface-2)}

/* 公告条：accent 底太亮，白字读不清 → 深色底 */
html[data-theme="tangerine"] .announcement-bar{background:var(--dark);color:var(--on-dark)}

html[data-theme="tangerine"] .service-strip{background:var(--surface)}
html[data-theme="tangerine"] .categories-section{background:var(--paper)}
html[data-theme="tangerine"] .products-section{background:var(--surface)}
html[data-theme="tangerine"] .factory-teaser{background:var(--surface-2)}
html[data-theme="tangerine"] .testimonials-section{background:var(--paper)}
html[data-theme="tangerine"] .certificates-section{background:var(--paper)}
html[data-theme="tangerine"] .blog-section{background:var(--surface-2)}

/* 小字强调保险层 */
html[data-theme="tangerine"] .text-link,
html[data-theme="tangerine"] .product-badge,
html[data-theme="tangerine"] .product-inquiry,
html[data-theme="tangerine"] .blog-read,
html[data-theme="tangerine"] .factory-image-label,
html[data-theme="tangerine"] .footer-email{color:var(--accent-text)}

/* 浅底（--accent-tint）上的图标方块：主色压上去对比度不够 */
html[data-theme="tangerine"] .icon-green,
html[data-theme="tangerine"] .final-cta-icon,
html[data-theme="tangerine"] .process-icon,
html[data-theme="tangerine"] .detail-icon{color:var(--accent-text)}

/* 版式微调：胶囊按钮 + 圆角卡片 */
html[data-theme="tangerine"] .button{border-radius:var(--radius-pill);padding:15px 28px}
html[data-theme="tangerine"] .button-large{padding:17px 32px}
html[data-theme="tangerine"] .nav-cta{padding:12px 22px}
html[data-theme="tangerine"] .filter-chip{border-radius:var(--radius-pill);padding:10px 18px}
html[data-theme="tangerine"] .eyebrow-line{height:2px}
html[data-theme="tangerine"] .category-card,
html[data-theme="tangerine"] .product-card,
html[data-theme="tangerine"] .testimonial-card,
html[data-theme="tangerine"] .certificate-card,
html[data-theme="tangerine"] .faq-item,
html[data-theme="tangerine"] .inquiry-card{border-radius:12px}
html[data-theme="tangerine"] .blog-image,
html[data-theme="tangerine"] .detail-image,
html[data-theme="tangerine"] .article-cover{border-radius:12px}
html[data-theme="tangerine"] .product-card h3{color:var(--ink)}

/* 页脚：深色底全套（照翠绿） */
html[data-theme="tangerine"] .site-footer{background:var(--dark);color:var(--on-dark)}
html[data-theme="tangerine"] .footer-brand-col>p,
html[data-theme="tangerine"] .footer-col a,
html[data-theme="tangerine"] .footer-bottom a{color:var(--on-dark-soft)}
html[data-theme="tangerine"] .footer-col h4,
html[data-theme="tangerine"] .muted-label{color:var(--on-dark-soft)}
html[data-theme="tangerine"] .footer-newsletter h3,
html[data-theme="tangerine"] .footer-email{color:var(--on-dark)}
html[data-theme="tangerine"] .footer-col a:hover,
html[data-theme="tangerine"] .footer-bottom a:hover{color:var(--accent)}
html[data-theme="tangerine"] .footer-email{border-bottom-color:rgba(255,255,255,.28)}
html[data-theme="tangerine"] .footer-bottom{border-top-color:rgba(255,255,255,.14);color:var(--on-dark-soft)}
html[data-theme="tangerine"] .social-dots a{border-color:rgba(255,255,255,.28);color:var(--on-dark-soft)}
html[data-theme="tangerine"] .brand-footer .brand-copy strong{color:var(--on-dark)}
html[data-theme="tangerine"] .brand-footer .brand-copy small{color:var(--on-dark-soft)}
html[data-theme="tangerine"] .brand-footer .brand-mark{background:var(--accent);color:var(--accent-contrast)}
html[data-theme="tangerine"] .footer-col h2{color:var(--on-dark-soft)}

/* final-cta：accent 底 + 白字不达标（3.44），改走浅底 + 墨字 */
html[data-theme="tangerine"] .final-cta-section{background:var(--surface-2);color:var(--ink)}
html[data-theme="tangerine"] .final-cta h2{color:var(--ink)}
html[data-theme="tangerine"] .final-cta h2 em{color:var(--gold-ink)}
html[data-theme="tangerine"] .final-cta .eyebrow-line{background:var(--gold-ink)}
html[data-theme="tangerine"] .final-cta p,
html[data-theme="tangerine"] .final-cta .eyebrow{color:var(--muted)}
html[data-theme="tangerine"] .final-cta>.button{border-color:var(--ink);color:var(--ink)}
html[data-theme="tangerine"] .final-cta>.button:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* ── 品牌撞色风（brand-pop）专属装饰段 ──────────────────────────
   骨架逻辑：accent 宝蓝白字达标（6.35:1），所以公告条/final-cta
   不需要 tangerine 那两个浅底补丁；只需要区块交替、页脚深色套
   和版式微调。
   final-cta 的背景可在后台「网站设置→01」选：跟随主题 / 深色 /
   浅色 / 浅强调色，见下方 .final-cta--… 变体段。 */
html[data-theme="brand-pop"] .hero-section{background:var(--surface-2)}

html[data-theme="brand-pop"] .service-strip{background:var(--surface)}
html[data-theme="brand-pop"] .categories-section{background:var(--paper)}
html[data-theme="brand-pop"] .products-section{background:var(--surface)}
html[data-theme="brand-pop"] .factory-teaser{background:var(--surface-2)}
html[data-theme="brand-pop"] .testimonials-section{background:var(--paper)}
html[data-theme="brand-pop"] .certificates-section{background:var(--paper)}
html[data-theme="brand-pop"] .blog-section{background:var(--surface-2)}

/* 版式微调：胶囊按钮 + 圆角卡片 */
html[data-theme="brand-pop"] .button{border-radius:var(--radius-pill);padding:15px 28px}
html[data-theme="brand-pop"] .button-large{padding:17px 32px}
html[data-theme="brand-pop"] .nav-cta{padding:12px 22px}
html[data-theme="brand-pop"] .filter-chip{border-radius:var(--radius-pill);padding:10px 18px}
html[data-theme="brand-pop"] .eyebrow-line{height:2px}
html[data-theme="brand-pop"] .category-card,
html[data-theme="brand-pop"] .product-card,
html[data-theme="brand-pop"] .testimonial-card,
html[data-theme="brand-pop"] .certificate-card,
html[data-theme="brand-pop"] .faq-item,
html[data-theme="brand-pop"] .inquiry-card{border-radius:12px}
html[data-theme="brand-pop"] .blog-image,
html[data-theme="brand-pop"] .detail-image,
html[data-theme="brand-pop"] .article-cover{border-radius:12px}
html[data-theme="brand-pop"] .product-card h3{color:var(--ink)}

/* 页脚：深蓝底全套（照 tangerine） */
html[data-theme="brand-pop"] .site-footer{background:var(--dark);color:var(--on-dark)}
html[data-theme="brand-pop"] .footer-brand-col>p,
html[data-theme="brand-pop"] .footer-col a,
html[data-theme="brand-pop"] .footer-bottom a{color:var(--on-dark-soft)}
html[data-theme="brand-pop"] .footer-col h4,
html[data-theme="brand-pop"] .muted-label{color:var(--on-dark-soft)}
html[data-theme="brand-pop"] .footer-newsletter h3,
html[data-theme="brand-pop"] .footer-email{color:var(--on-dark)}
html[data-theme="brand-pop"] .footer-col a:hover,
html[data-theme="brand-pop"] .footer-bottom a:hover{color:var(--accent-quiet)}
html[data-theme="brand-pop"] .footer-email{border-bottom-color:rgba(255,255,255,.28)}
html[data-theme="brand-pop"] .footer-bottom{border-top-color:rgba(255,255,255,.14);color:var(--on-dark-soft)}
html[data-theme="brand-pop"] .social-dots a{border-color:rgba(255,255,255,.28);color:var(--on-dark-soft)}
html[data-theme="brand-pop"] .brand-footer .brand-copy strong{color:var(--on-dark)}
html[data-theme="brand-pop"] .brand-footer .brand-copy small{color:var(--on-dark-soft)}
html[data-theme="brand-pop"] .brand-footer .brand-mark{background:var(--accent);color:var(--accent-contrast)}
html[data-theme="brand-pop"] .brand-footer .brand-mark svg{color:var(--gold)}
html[data-theme="brand-pop"] .footer-col h2{color:var(--on-dark-soft)}

/* ── Kraken 紫韵风（kraken）专属装饰段 ──────────────────
   白底、紫强调、12px 圆角按钮、近黑页脚。骨架逻辑：
   --accent 紫白字达标（6.06:1），公告条 / final-cta 不需要浅色补丁，
   直接用变量令牌（--green=紫、--on-dark=白）。版式按 DESIGN.md 调整：
     · 标题无衬线、700 字重、负字距（Kraken-Brand 观感），不走 editorial 层的衬线 400；
     · 按钮 12px（非胶囊）；卡片 16px、小元素 8px（DESIGN §5 圆角档）。
   final-cta 背景仍可后台「网站设置→01」选：跟随主题 / 深色 / 浅色 / 浅强调色。 */

/* 区块交替：白与极淡冷灰相间（--paper=--surface=白，靠 --surface-2 拉开层次） */
html[data-theme="kraken"] .hero-section{background:var(--paper)}
html[data-theme="kraken"] .service-strip{background:var(--surface)}
html[data-theme="kraken"] .categories-section{background:var(--surface-2)}
html[data-theme="kraken"] .products-section{background:var(--paper)}
html[data-theme="kraken"] .factory-teaser{background:var(--surface-2)}
html[data-theme="kraken"] .testimonials-section{background:var(--paper)}
html[data-theme="kraken"] .certificates-section{background:var(--surface-2)}
html[data-theme="kraken"] .blog-section{background:var(--paper)}

/* 标题：无衬线 + 700 字重 + 负字距（Kraken-Brand 风格），
   覆盖编辑风精修层给标题设的衬线 400 字重 */
html[data-theme="kraken"] .hero-copy h1,html[data-theme="kraken"] .interior-hero h1,
html[data-theme="kraken"] .section-heading h2,html[data-theme="kraken"] .factory-copy h2,
html[data-theme="kraken"] .about-content h2,html[data-theme="kraken"] .contact-info h2,
html[data-theme="kraken"] .final-cta h2,html[data-theme="kraken"] .detail-copy h1,
html[data-theme="kraken"] .article-header h1,html[data-theme="kraken"] .brand-copy strong{
  font-weight:700;
  letter-spacing:-.02em}
/* DESIGN 不用斜体做强调：标题里的 em 改正常体 + 品牌紫 */
html[data-theme="kraken"] h1 em,html[data-theme="kraken"] h2 em{
  font-style:normal;
  font-weight:700;
  color:var(--accent)}

/* 圆角：按钮 12px（DESIGN 铁律：非胶囊），筛选片 12px */
html[data-theme="kraken"] .button{border-radius:12px}
html[data-theme="kraken"] .nav-cta{border-radius:12px}
html[data-theme="kraken"] .filter-chip{border-radius:12px}
/* 卡片 16px、内嵌图与表单控件 12px（DESIGN §5 圆角标尺） */
html[data-theme="kraken"] .category-card,
html[data-theme="kraken"] .product-card,
html[data-theme="kraken"] .testimonial-card,
html[data-theme="kraken"] .certificate-card,
html[data-theme="kraken"] .faq-item,
html[data-theme="kraken"] .factory-photo-placeholder{border-radius:16px}
html[data-theme="kraken"] .inquiry-card{border-radius:16px}
html[data-theme="kraken"] .blog-image,
html[data-theme="kraken"] .detail-image,
html[data-theme="kraken"] .article-cover{border-radius:12px}
html[data-theme="kraken"] .inquiry-form input:not([type=checkbox]),
html[data-theme="kraken"] .inquiry-form textarea,
html[data-theme="kraken"] .inquiry-form select{border-radius:10px}
html[data-theme="kraken"] .product-card h3{color:var(--ink)}

/* 品牌字标：白底页头用紫底白爪（避免 --gold/--green 同为紫导致紫叠紫） */
html[data-theme="kraken"] .brand-mark{background:var(--accent);color:var(--accent-contrast)}

/* 页脚：近黑底全套（DESIGN 用 #101114 做深色区，不用紫做整片底） */
html[data-theme="kraken"] .site-footer{background:var(--dark);color:var(--on-dark)}
html[data-theme="kraken"] .footer-brand-col>p,
html[data-theme="kraken"] .footer-col a,
html[data-theme="kraken"] .footer-bottom a{color:var(--on-dark-soft)}
html[data-theme="kraken"] .footer-col h4,
html[data-theme="kraken"] .footer-col h2,
html[data-theme="kraken"] .muted-label{color:var(--on-dark-soft)}
html[data-theme="kraken"] .footer-newsletter h3,
html[data-theme="kraken"] .footer-email{color:var(--on-dark)}
html[data-theme="kraken"] .footer-col a:hover,
html[data-theme="kraken"] .footer-bottom a:hover{color:var(--gold)}
html[data-theme="kraken"] .footer-email{border-bottom-color:rgba(255,255,255,.22)}
html[data-theme="kraken"] .footer-bottom{border-top-color:rgba(255,255,255,.14);color:var(--on-dark-soft)}
html[data-theme="kraken"] .social-dots a{border-color:rgba(255,255,255,.22);color:var(--on-dark-soft)}
html[data-theme="kraken"] .brand-footer .brand-copy strong{color:var(--on-dark)}
html[data-theme="kraken"] .brand-footer .brand-copy small{color:var(--on-dark-soft)}
html[data-theme="kraken"] .brand-footer .brand-mark{background:var(--accent);color:var(--accent-contrast)}

/* 徽章：用 DESIGN 的 success 语义（绿 16% 底 + 深绿字），
   产品角标从主题紫底白字换成更“交易屏”观感的绿底深绿字 */
html[data-theme="kraken"] .product-badge{background:rgba(20,158,97,.16);color:#026b3f;border-radius:6px}

/* ── 首页结尾 CTA 背景变体（2026-10-16，后台「网站设置→01」可选）────
   后台字段 final_cta_bg：theme（默认，无规则 → 走全局覆盖层的
   --dark 深底）/ light / tint。
   选择器都带 html[data-theme] 前缀：压过前面全局覆盖层与各主题
   对 .final-cta-section 的专属规则，保证后台手选一定生效。
   浅底变体把文字从「深底浅字」切回「浅底深字」：标题墨色、
   眉题线与斜体强调走 gold-ink（白底 4.96:1），说明文字 muted；
   全局覆盖层的 outline 白字按钮在浅底上看不见，
   换回 accent 蓝底白字（6.35:1）。 */
html[data-theme] .final-cta-section.final-cta--light{background:var(--surface-2)}
html[data-theme] .final-cta-section.final-cta--tint{background:var(--accent-tint)}

html[data-theme] .final-cta--light h2,
html[data-theme] .final-cta--tint h2{color:var(--ink)}
html[data-theme] .final-cta--light h2 em,
html[data-theme] .final-cta--tint h2 em{color:var(--gold-ink)}
html[data-theme] .final-cta--light p,
html[data-theme] .final-cta--light .eyebrow,
html[data-theme] .final-cta--tint p,
html[data-theme] .final-cta--tint .eyebrow{color:var(--muted)}
html[data-theme] .final-cta--light .eyebrow-line,
html[data-theme] .final-cta--tint .eyebrow-line{background:var(--gold-ink)}
html[data-theme] .final-cta--light .final-cta>.button,
html[data-theme] .final-cta--tint .final-cta>.button{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-contrast)}
html[data-theme] .final-cta--light .final-cta>.button:hover,
html[data-theme] .final-cta--tint .final-cta>.button:hover{
  background:var(--accent-dark);
  border-color:var(--accent-dark);
  color:var(--accent-contrast)}

/* ════════════════════════════════════════════════════════════════
   对比度修复（全局，作用于所有主题）—— 2026-10-11 补
   背景：亮色主题（霓虹粉 / 翠绿）的 --accent 饱和度很高但不够深，
   当「小字颜色」放在白底上只有 2.8:1，读不清。
   约定：--accent 只做底色，小字强调一律走 --accent-text
        （各主题里那个「浅底上够深的强调色」）。
   ════════════════════════════════════════════════════════════════ */

/* 页头品牌名：白底页头必须用深色。
   页脚那边由 html[data-theme=…] .brand-footer .brand-copy 单独覆盖成浅色，
   那条选择器特异性更高，不会被这里盖掉。 */
.brand-copy strong{color:var(--ink)}
.brand-copy small{color:var(--muted)}

/* 按钮标签：字重加粗一档，配合更深的 --accent-contrast 一起提清晰度 */
.button{font-weight:700}

/* 亮色当小字 → 一律 --accent-text */
.nav-link:hover,.nav-link.is-current{color:var(--accent-text)}
.dropdown-menu a:hover{color:var(--accent-text)}
.dropdown-menu span{color:var(--accent-text)}
.breadcrumb a:hover{color:var(--accent-text)}
.blog-card h3 a:hover{color:var(--accent-text)}
.back-to-products{color:var(--accent-text)}
.factory-stat-row strong{color:var(--accent-text)}
.floating-sticker{color:var(--accent-text)}
.tag-icon,.tag-check{color:var(--accent-text)}
.icon-lilac{color:var(--accent-text)}
.success-mark{color:var(--accent-text)}
.button-outline{color:var(--accent-text);border-color:var(--line-strong)}
.button-outline:hover{color:var(--accent-text);border-color:var(--accent-text)}

/* 服务条图标：--accent 在白底上只有 2.8:1，当图形也偏淡 */
.service-icon{color:var(--accent-text)!important;border-color:var(--accent-text)}

/* 金属点缀做「小字」时（序号、破折号、引号前缀、FAQ 加减号）统一走 --gold-ink。
   注意别动 .final-cta h2 em —— 它在深色底上，要的就是亮的 --gold。 */
.values-grid article>span,
.contact-points b,
.contact-note>span{color:var(--gold-ink)}
.faq-item summary::after{color:var(--gold-ink)}

/* ════════════════════════════════════════════════════════════════
   通栏轮播首屏（.hero-carousel）
   ────────────────────────────────────────────────────────────
   设计要点：
   · 撑满屏幕：不套 .container，自身 100% 宽 + 视口高，内容再单独
     用 .container 收边，所以背景是通栏的、文字仍与全站对齐。
   · 幻灯片用 CSS Grid 叠在同一格里（grid-area:1/1），
     高度自动取最高那张，不会有绝对定位塌陷的问题。
   · 三套背景：浅色(tint) / 深色(deep) / 插画铺底(art) / 上传图片(has-photo)。
     背景全部走语义令牌，换主题自动跟着变。
   ════════════════════════════════════════════════════════════════ */

.hero-carousel{
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--surface-2);
}
.hero-carousel-viewport{position:relative;display:grid}

.hero-slide{
  grid-area:1/1;                /* 所有幻灯片叠在同一格 */
  position:relative;
  display:flex;
  align-items:center;
  min-height:clamp(540px,74vh,780px);
  background:var(--surface-2);
  opacity:0;
  visibility:hidden;
  transform:scale(1.025);
  transition:opacity .8s ease, transform .8s ease, visibility .8s;
}
.hero-slide.is-active{opacity:1;visibility:visible;transform:none;z-index:2}
.hero-slide.is-dark{background:var(--dark);color:var(--on-dark)}

/* 上传的图片铺满整屏。只在「有文字要叠上去」时才压遮罩。 */
.hero-slide-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.hero-slide-scrim{
  position:absolute;inset:0;z-index:1;
  /* 渐变收得比之前陡：左侧文字区足够深，右侧 28% 完全不加暗，
     这样大图的主体还看得清，不会整屏灰蒙蒙。 */
  background:linear-gradient(96deg,
    rgba(4,16,13,.78) 0%,rgba(4,16,13,.68) 30%,
    rgba(4,16,13,.40) 46%,rgba(4,16,13,.12) 60%,
    rgba(4,16,13,0) 72%);
}

/* ── 纯图片模式（.hero-slide.is-image-only）──────────────────────
   后台「显示方式」选「只显示图片」时走这条：整屏铺满、不压遮罩、
   不渲染任何文字层，图片保持原亮度。 */
.hero-slide.is-image-only{
  background:var(--dark);   /* 图片解码完成前先垫个深色，避免闪白 */
}
.hero-slide.is-image-only .hero-slide-photo{z-index:0}

/* 填充方式「铺满整屏」：保持原来的全屏高度，超出裁掉 */
.hero-slide.is-image-only.is-img-fit-cover{
  min-height:clamp(540px,74vh,780px);
}

/* 没有文字、也没有真实图片（只剩一张占位插画）时，不必强制全屏高 */
.hero-slide.no-copy:not(.has-photo){min-height:clamp(300px,46vh,540px)}

/* ── 高度基准：由「完整显示」的那张图片比例决定 ──────────────────
   所有幻灯片都叠在同一个网格格里，默认 stretch 会把它们拉到
   「最高那张」的高度。如果只让幻灯片自己带 aspect-ratio，
   别的幻灯片一撑高，图片就被拉伸裁切了，切换时还会露出色带。
   所以把比例提到容器上：所有幻灯片统一高度，谁也不带节奏。
   min/max 两个夹子负责窄屏不至于只剩一条、超宽屏不至于顶出屏幕。

   ⚠ width:100% 不能省（2026-10-13 修的 bug）。
   只写 aspect-ratio + min/max-height 时，容器宽度是 auto，
   而 min/max-height 一旦真的夹住了高度，浏览器会**反推宽度**来维持比例：
     · 窗口 1920×757 → 88vh 把高度夹到 666 → 宽度变成 666×2.4=1599 →
       右边 321px 露出轮播自己的底色（用户报的「有时候能看到底色」）
     · 窗口 500 宽 → 42vh 把高度抬到 318 → 宽度变成 763 →
       图片比窗口还宽，右边被砍掉一截，而且窗口继续变窄它也不跟着缩
       （用户报的「没有适配尺寸的变化」）
   写成 width:100% 之后宽度就是确定值，比例只用来算高度，
   高度被夹住时只是单纯裁掉图片的一部分，宽度永远等于窗口宽。 */
.hero-carousel.has-img-ratio .hero-carousel-viewport{
  width:100%;
  aspect-ratio:var(--hero-ratio,auto);
  min-height:clamp(300px,42vh,540px);
  max-height:88vh;
}
/* 容器已经有统一高度了，各幻灯片自己的 min-height 一律让位。
   这里必须写成 4 个类，才能压过上面 .hero-slide.is-image-only.is-img-fit-cover
   和 .hero-slide.no-copy:not(.has-photo) 那两条（3 个类）。
   顺序也重要：这段必须排在它们后面。 */
.hero-carousel.has-img-ratio .hero-slide.is-image-only,
.hero-carousel.has-img-ratio .hero-slide.no-copy,
.hero-carousel.has-img-ratio .hero-slide.is-img-fit-cover{min-height:0}

/* 没有文字层时，内层不再需要两栏排版 */
.hero-slide.no-copy .hero-slide-inner{grid-template-columns:1fr}
.hero-slide.no-copy .hero-slide-art{justify-self:center;width:min(100%,620px)}

/* ── 背景风格「插画铺底」(background=art) ──────────────────────
   把同一张矢量插画放大数倍、从右侧出血地铺在底层，再叠一层
   由 --surface-2 渐隐的遮罩，保证左侧文字区干净可读。
   文字仍是主题的深色墨，所以不需要 is-dark 那套翻色。 */
.hero-slide.is-art-bg{overflow:hidden}
.hero-slide-art-bg{
  position:absolute;z-index:0;
  top:50%;right:-10%;
  width:min(1380px,92vw);height:auto;
  transform:translateY(-50%);
  opacity:.34;
  pointer-events:none;user-select:none;
}
/* 左侧渐隐遮罩：铺一层纯 --surface-2 再用 mask 把它淡出。
   用遮罩而不是「颜色 → transparent」渐变，是因为透明度端点若写
   rgba(255,255,255,0)，中间会混出白色、把插画冲淡。 */
.hero-slide.is-art-bg::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--surface-2);
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 26%,transparent 68%,transparent 100%);
  mask-image:linear-gradient(100deg,#000 0%,#000 26%,transparent 68%,transparent 100%);
}
.hero-slide.is-art-bg .hero-slide-inner{z-index:2}
@media(max-width:900px){
  .hero-slide-art-bg{opacity:.22;right:-26%;width:150vw}
  .hero-slide.is-art-bg::after{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 78%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 78%,transparent 100%);
  }
}

.hero-slide-inner{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,3.5vw,60px);
  align-items:center;
  padding:clamp(44px,7vh,86px) 0 clamp(64px,9vh,104px);   /* 底部留出圆点的位置 */
}
.hero-slide .hero-copy{padding:0}
.hero-slide .hero-copy h1{margin-top:22px}

/* 深色底 / 有图片时，文字整体换成浅色 */
.hero-slide.is-dark .hero-copy h1,
.hero-slide.has-photo .hero-copy h1{color:var(--on-dark)}
.hero-slide.is-dark .hero-lede,
.hero-slide.has-photo .hero-lede{color:var(--on-dark-soft)}
.hero-slide.is-dark .text-link,
.hero-slide.has-photo .text-link{color:var(--on-dark)}

/* 右侧插画 */
.hero-slide-art{justify-self:end;width:min(100%,470px);margin:0}
.hero-slide-art img{width:100%;height:auto;display:block}
/* 深色底上给插画一块浅色玻璃托板，否则插画会糊进背景 */
.hero-slide.is-dark .hero-slide-art{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  padding:clamp(14px,2vw,24px);
  backdrop-filter:blur(6px);
}

/* ── 控件 ── */
.hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:48px;height:48px;display:grid;place-items:center;
  border:1px solid var(--line-strong);border-radius:50%;
  background:var(--glass);backdrop-filter:blur(10px);
  color:var(--ink);font-size:16px;line-height:1;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.hero-nav:hover{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}
.hero-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hero-prev{left:clamp(12px,2.2vw,32px)}
.hero-next{right:clamp(12px,2.2vw,32px)}

.hero-dots{
  position:absolute;left:0;right:0;bottom:clamp(16px,2.6vh,30px);z-index:6;
  display:flex;justify-content:center;gap:9px;
}
.hero-dot{
  width:34px;height:4px;padding:0;border:0;border-radius:2px;
  background:var(--line-strong);cursor:pointer;
  transition:background .25s,width .25s,transform .25s;
}
.hero-dot:hover{background:var(--muted)}
.hero-dot.is-active{background:var(--accent);width:54px}
.hero-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 当前是深色/图片幻灯片时，控件也要翻成浅色（由脚本挂 is-dark-active） */
.hero-carousel.is-dark-active .hero-nav{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);color:#fff;
}
.hero-carousel.is-dark-active .hero-nav:hover{
  background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);
}
.hero-carousel.is-dark-active .hero-dot{background:rgba(255,255,255,.42)}
.hero-carousel.is-dark-active .hero-dot.is-active{background:var(--accent)}

/* 自动播放进度条：每切换一张由脚本重启一次动画 */
.hero-dots::after{
  content:"";position:absolute;left:50%;bottom:-11px;height:2px;width:0;
  transform:translateX(-50%);background:var(--accent);border-radius:2px;
}
.hero-carousel.is-playing .hero-dots::after{
  animation:heroProgress var(--hero-duration,6500ms) linear forwards;
}
@keyframes heroProgress{from{width:0}to{width:100%}}

.hero-carousel + .hero-bottom{padding-top:16px}

/* ── 响应式 ── */
@media(max-width:1024px){
  .hero-slide-inner{grid-template-columns:1fr;gap:30px}
  .hero-slide-art{justify-self:center;width:min(100%,360px);order:-1}
  .hero-slide .hero-copy{text-align:left}
}
@media(max-width:600px){
  .hero-slide{min-height:auto}
  /* 注意：纯图片模式（.hero-slide.is-image-only）带两个额外类，
     特异性高于这条 min-height:auto，所以它的高度不会被这里清掉。 */
  .hero-slide-inner{padding:34px 0 62px}
  .hero-slide-art{width:min(100%,260px)}
  .hero-nav{width:38px;height:38px;font-size:14px}
  .hero-dot{width:26px}
  .hero-dot.is-active{width:40px}
}

/* 尊重系统的「减少动态效果」设置 */
@media(prefers-reduced-motion:reduce){
  .hero-slide{transition:opacity .01ms;transform:none}
  .hero-dots::after{transition:none}
}

/* ══════════════════════════════════════════════════════════════
   产品详情页：图册（缩略图条）+ 详情长图 + 放大灯箱
   后台维护位置：业务内容 → 产品 → 「产品图册」/「产品详情图」
   ──────────────────────────────────────────────────────────────
   这一块写在「精修层」里，所以 editorial_restyle.py 重新生成
   static/site/styles.css 时会被原样带下去，不会被冲掉。
   ══════════════════════════════════════════════════════════════ */

/* ── 主图：点开可放大 ── */
.detail-image-open{
  display:block;
  cursor:zoom-in;
  border-radius:var(--radius-sm);
  transition:opacity .2s}
.detail-image-open:hover{opacity:.9}
.detail-image-open:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.detail-image-open img{display:block;margin-inline:auto}

/* ── 缩略图条 ──
   用 auto-fill 而不是固定列数：传 3 张就排 3 个、传 12 张自动折行，
   不需要知道用户会传几张。 */
.detail-thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:10px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line-soft)}
.detail-thumb{
  display:block;
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-2);
  overflow:hidden;
  line-height:0;
  transition:border-color .2s}
.detail-thumb:hover{border-color:var(--muted)}
/* 选中态用 inset outline 而不是外投影：.detail-image 有 overflow:hidden，
   外投影在最左边/最右边那两张上会被裁掉一截。 */
.detail-thumb.is-active{outline:2px solid var(--accent);outline-offset:-2px}
.detail-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 覆盖 .detail-image img 自带的 1:1 + contain：缩略图要统一裁成正方形，
   否则宽高比不一的图在条里会高低不齐。选择器多一层是为了压过原规则的特异性。 */
.detail-image .detail-thumb img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover}

/* ── 详情长图（通栏） ── */
.detail-gallery{
  margin-top:88px;
  padding-top:42px;
  border-top:1px solid var(--line)}
.detail-gallery-head{margin-bottom:34px}
.detail-gallery-head h2{font-size:32px;margin-top:10px}
.detail-gallery-stack{
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:1040px;
  margin-inline:auto}
.detail-gallery-item{margin:0}
/* 这里刻意不写 aspect-ratio / object-fit：尺寸图、结构图一裁就废，
   必须等比完整展示。宽度交给上面 max-1200 的等比缩图。 */
.detail-gallery-item img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-3)}
.detail-gallery-item figcaption{
  margin-top:10px;
  color:var(--faint);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase}
.detail-gallery-cta{display:inline-block;margin-top:28px}
/* 图册和下面「品牌故事」挨着时，两条分隔线不用拉那么开 */
.detail-gallery + .detail-extra{margin-top:64px}

/* ── 放大灯箱 ── */
.product-lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(8,7,6,.93)}
.product-lightbox.is-open{display:flex}
.lb-figure{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin:0;
  max-width:min(1100px,100%);
  max-height:100%}
.lb-figure img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  /* 预留出关闭按钮和说明文字的高度，图再长也不会把说明挤出屏幕 */
  max-height:calc(100vh - 200px);
  border-radius:var(--radius-md)}
.lb-figure figcaption{
  color:#fff;
  font-size:13px;
  letter-spacing:.05em;
  text-align:center;
  opacity:.82}
.product-lightbox:not(.has-caption) figcaption{display:none}
.lb-close,.lb-nav{
  position:absolute;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.3);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  line-height:1;
  transition:background .2s,border-color .2s,color .2s}
.lb-close{top:clamp(12px,2.4vw,28px);right:clamp(12px,2.4vw,28px);width:44px;height:44px;font-size:20px}
.lb-nav{top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:24px}
.lb-prev{left:clamp(12px,2.4vw,28px)}
.lb-next{right:clamp(12px,2.4vw,28px)}
.lb-close:hover,.lb-nav:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb-count{
  position:absolute;
  bottom:clamp(12px,2.4vw,26px);
  left:50%;
  transform:translateX(-50%);
  color:rgba(255,255,255,.72);
  font-size:12px;
  letter-spacing:.14em}
body.no-scroll{overflow:hidden}

/* ── 响应式 ── */
@media(max-width:760px){
  .detail-thumbs{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}
  .detail-gallery{margin-top:56px;padding-top:32px}
  .detail-gallery-head h2{font-size:24px}
  .detail-gallery-stack{gap:14px}
  .lb-nav{width:42px;height:42px;font-size:20px}
  .lb-figure img{max-height:calc(100vh - 230px)}
}

/* 尊重系统的「减少动态效果」设置 */
@media(prefers-reduced-motion:reduce){
  .detail-image-open,.detail-thumb,.lb-close,.lb-nav{transition:none}
}

/* ══════════════════════════════════════════════════════════════
   无障碍：标题层级（heading hierarchy）
   ──────────────────────────────────────────────────────────────
   检查工具（WAVE / axe / Lighthouse）会报「Avoid skipping levels」——
   标题层级不能跳级：h1 之后必须先是 h2，不能直接到 h3。

   这里做两类事：
   1) 把「层级本身就写错」的标题标签改对（页脚栏目标题、规格表标题），
      并在下面**原样复刻它们按旧标签写的样式**，视觉零变化。
   2) 提供一个 .sr-only：页面上某个区块本来就没有可见标题，但它的子项
      用了 h3，中间缺一层 h2 —— 用只为读屏和爬虫渲染的 h2 把这一层补上。
   ══════════════════════════════════════════════════════════════ */

/* ── 只给读屏和搜索引擎看的文字 ──
   视觉上 1px 且被裁掉，不占位、不影响布局，但仍在无障碍树里，
   会作为真正的标题被朗读和收录。用于补齐缺失的标题层级。 */
.sr-only{
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0}

/* ── 页脚栏目标题：h4 → h2 ──
   原来页脚用的是 h4，而页脚上面一级是 h2，直接从 h2 跳到 h4 会被判跳级。
   栏目本身就是「一组页脚链接的标题」，用 h2 是正确层级（页脚是顶层区域）。
   下面的声明是把旧 .footer-col h4 的最终计算值原样搬过来，外观不变。 */
.footer-col h2{
  font-size:11px;
  letter-spacing:.2em;
  font-weight:600;
  text-transform:uppercase;
  color:var(--faint);
  margin:8px 0 20px}
html[data-theme="ocean-pink"] .footer-col h2,
html[data-theme="emerald"] .footer-col h2{color:var(--on-dark-soft)}

/* ── 产品详情「规格总览」标题：h3 → h2 ──
   它紧跟在产品名 h1 后面，中间没有 h2，所以原来是 h1 → h3 跳级。
   同样把旧 .detail-specs h3 的样式搬过来。 */
.detail-specs h2{
  font-size:12px;
  margin:20px 0 11px;
  font-family:var(--font-sans);
  font-weight:600;
  letter-spacing:0}
/* ── 产品详情「Related products」标题：h3 → h2 ──
   它下面挂的是产品卡（每张卡的标题是 h3）。原来的写法让「分组标题」
   和「组内条目」同为 h3，层级上说不通 —— 标题不该和自己的子项平级。
   这一层原本没有写任何样式，吃的是浏览器对 h3 的默认值，
   所以下面把那份默认计算值原样搬过来，改完外观不变。 */
.detail-extra .related-heading{
  font-family:inherit;
  font-size:1.17em;
  font-weight:700;
  letter-spacing:inherit;
  margin:1em 0}
/* ══════════════════════════════════════════════════════════════
   可读性加强层
   ──────────────────────────────────────────────────────────────
   用户反馈：整体字体偏灰、不够清亮；导航栏偏细偏淡。

   三件事：

   1) 关掉 -webkit-font-smoothing:antialiased
      这行会让 macOS 改用「细体灰度渲染」，文字整体掉一档重量 ——
      是「整站发灰」最直接的来源。改回 auto，恢复系统默认渲染。

   2) 把三个「文字色」令牌整体压深，色相一律不动，只降亮度。
      取色按「最差背景」算（--paper 与 --surface-2 里更暗的那个），
      保证在两种底色上都过 AA。

      ⚠ 2026-10-14 更新：本层原先在这里直接重定义那三个令牌，导致令牌块失效。
      现在**取值已并入 TOKEN_BLOCK**（唯一来源），并由
      `.workbuddy/tools/solve_text_contrast.py` 重新反解过一轮，
      目标抬到 --muted ≈ 8.0:1、--faint ≈ 5.2:1、--ghost ≈ 3.4:1。
      细则见下方那段说明。

   3) 导航栏单独加粗加黑。
      .nav-link 原来是 11.5px / 字重 500 / 大写 / .1em 字距 / 用 --ink-soft。
      大写字母本身就比小写显小，再叠 11.5px 和 500 字重，是整站最淡的一处。
      现在：颜色提到最深的 --ink、字重 500 → 700、字距 .1em → .06em。
      字距收紧只会让菜单更窄，不会撑破 1440px 下的排版；
      字号刻意不动，避免覆盖 861~1100px 与 ≤860px 两个断点的既有取值。
   ══════════════════════════════════════════════════════════════ */

html,
body{
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto}

/* ⚠ 这一层原本在这里用 6 条单行规则重定义 --ink-soft / --muted / --faint，
   想压深文字色。问题是它排在令牌块**之后**，于是变成了「实际生效的那一份」，
   令牌块改半天没有任何效果 —— 2026-10-14 调字重时就踩了这个坑
   （改了 --muted / --faint 全站无变化，只有 --on-dark-soft 动了，
     因为那一层没覆盖它）。
   现已把那几张表的取值**并入** editorial_restyle.py 的 TOKEN_BLOCK，
   这里不再重复声明。**令牌只有一个来源：TOKEN_BLOCK。**
   要再调文字色，改 editorial_restyle.py，或用
   `.workbuddy/tools/solve_text_contrast.py` 反解后回填。 */

.nav-link{
  color:var(--ink);
  font-weight:700}
/* 窄一点的断点上只收字距（让菜单放得下），字号沿用该断点原值 */
@media(min-width:861px){
  .nav-link{letter-spacing:.06em}}
.nav-link:hover,
.nav-link.is-current{color:var(--accent-text)}
/* 右侧询盘按钮从 600 提到 700，避免菜单加粗后权重不统一 */
.nav-cta{font-weight:700}

/* ══════════════════════════════════════════════════════════════
   产品详情图册：左侧缩略图竖列 + 右侧大图
   ──────────────────────────────────────────────────────────────
   电商买家的习惯是「左栏选图、右栏看大图」，视线不用来回跳，
   也不用往下滚才能看到其它角度。窄屏会自动退回「大图在上、
   缩略图在下」的竖排（见文件末尾的媒体查询）。

   DOM 结构（模板里）：
     .detail-image            ← 外层卡片，样式原本就有
     └─ .detail-stage          ← 新增，图册区容器
        ├─ .detail-thumbs      ← 左栏，单列竖排
        └─ a.detail-image-open  ← 右栏大图

   ⚠ 两条必须遵守的约定：
   1. 这里出现的每一条**非媒体查询**规则都会盖住原样式表里所有断点的取值，
      所以凡是会影响小屏的，必须写成 @media(max-width:860px)。
   2. .detail-thumbs 原本是横向网格（auto-fill 多列），现在改成单列竖排。
      760px 断点里那条 `grid-template-columns:repeat(auto-fill,…)` 的取值
      会被下面那条非媒体查询规则盖掉 —— 所以窄屏要单独在媒体查询里写回来。
   ══════════════════════════════════════════════════════════════ */

.detail-stage{
  display:grid;
  /* 左栏固定 78px（缩略图 72 + 边框），右栏吃掉剩下的宽度 */
  grid-template-columns:78px minmax(0,1fr);
  gap:16px;
  align-items:start}

/* ── 左栏：缩略图单列竖排 ── */
.detail-stage .detail-thumbs{
  display:flex;
  flex-direction:column;
  gap:10px;
  /* 竖排时不再需要横向网格的换行与上边框分隔 */
  grid-template-columns:none;
  margin-top:0;
  padding-top:0;
  border-top:0;
  /* 图多时左栏跟着大图一起滚，不撑破卡片高度 */
  max-height:560px;
  overflow-y:auto;
  /* 细滚动条，不喧宾夺主 */
  scrollbar-width:thin}
.detail-stage .detail-thumb{flex:0 0 auto;width:100%}
/* 覆盖 .detail-image img 自带的 1:1 + contain：缩略图统一裁正方形，
   否则宽高比不一的图在列里会大小不一。选择器多一层压过原规则特异性。 */
.detail-stage .detail-thumb img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover}

/* ── 右栏：大图 ──
   必须显式覆盖 `.detail-image img` 的 `width:100%` + `aspect-ratio:1/1`
   —— 那条规则来自原样式表，特性 (0,2,1)，会把产品图硬压成正方形。

   ⚠ 这里不能用 `width:auto;height:auto`：那样浏览器在图片加载完成前
   算不出固有尺寸，渲染出的宽高是 0，截图/首帧会看到裂图（imgComplete=false、
   renderedW=0）。保留 max-width/max-height 让它按比例缩放，同时靠
   HTML 上的 width/height 属性预留空间，避免加载完成时页面跳动。 */
.detail-stage .detail-image-open{
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface-3);
  border-radius:var(--radius-sm)}
.detail-stage .detail-image-open img{
  max-width:100%;
  max-height:560px;
  width:auto;
  height:auto;
  /* 不用 aspect-ratio:1/1 —— 产品主图不是正方形，1:1 会裁掉或变形 */
  aspect-ratio:auto;
  object-fit:contain;
  /* 兜底：HTML 上的 width/height 属性在 JS 切换时会removeAttribute，
     这里给个最小宽度避免换图瞬间塌成 0 宽 */
  min-width:1px}

/* ── 只有一张图时没有缩略图列 ──
   .detail-stage 只有大图一个子元素时用 auto 占满宽度，避免留一条空的白栏。 */
.detail-stage:not(:has(.detail-thumbs)){grid-template-columns:minmax(0,1fr)}

/* ── 窄屏：退回「大图在上、缩略图在下」 ──
   860px 以下外层 .product-detail-grid 本来就变成单列了，图册区跟着竖排更好用。
   这一条必须带媒体查询 —— 见文件顶部那段约定。 */
@media(max-width:860px){
  .detail-stage{grid-template-columns:minmax(0,1fr);gap:14px}
  .detail-stage .detail-thumbs{
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px;
    max-height:none;
    overflow-y:visible;
    /* 缩略图横排时给个固定宽度，不要拉满 */
    width:100%}
  .detail-stage .detail-thumb{width:64px}
  .detail-stage .detail-image-open{min-height:0}
  .detail-stage .detail-image-open img{width:100%;max-width:100%;max-height:none}
}

/* ── 产品详情：规格表为空时的提示 ──────────────────────────────────
   规格行全部来自「产品与规格表」。后台一个规格行都没填时，
   {% empty %} 分支渲染这句话，别让页面上只剩一个光秃秃的标题。
   颜色走 --muted：落在 detail-specs 的浅底上，和 spec-row 的标签色一致。 */
.spec-empty{
  font-size:11px; color:var(--muted); font-style:italic;
  padding:14px 0; margin:0}

/* ── 内页去掉大横幅后的正文开场（2026-10-13）────────────────────
   内页顶部那个大横幅（背景色 + 插画 + 巨大标题）按用户要求删掉了，
   但横幅里除了标题还有两样不能丢的东西：
     · about_body / supply_body —— 页面导语。supply_body 尤其重要，
       它写的是「本站是贸易公司、不是单一工厂」这个站点定位。
     · CTA 按钮（联系咨询入口）。
   它们移到正文区顶部，用下面两个类排版。字号刻意比原来的横幅小 ——
   横幅时代它们是「大标题下面的大字」，现在应该回到正常正文的层级。 */
.page-lede{
  font-size:15px; line-height:1.85; color:var(--ink-soft);
  max-width:720px; margin:0 0 26px}
/* supply_chain 用的是 .container（宽），导语别拉成一整行长条 */
.page-lede-wide{max-width:860px}
.page-cta-row{
  margin:0 0 40px; padding-bottom:32px;
  border-bottom:1px solid var(--line)}
/* contact 页：服务要点原本在横幅里，现在提到联系方式模块最上面 */
.contact-points-lead{margin:0 0 26px}


/* ── 内页顶部横幅：通栏大图（2026-10-13）─────────────────────────
   原来是左文字右插画的 .interior-hero（min-height:350px）。现在改成
   一张横幅图通栏铺满，图上自带文字，页面不再叠加标题。

   为什么用 object-fit:cover + 固定高度：
     访客上传的图尺寸不一（可能 1600×500，也可能 1200×900）。
     cover 让图铺满固定高度的横幅、不留白边也不变形；上传时若图太矮，
     上下会被裁掉一部分 —— 所以 help_text 里建议高 500–700px。
   为什么是 width:100% 而不是 max-width：
     通栏 = 铺满视口。原来的 .interior-hero 用 .container 居中留边，
     这里刻意不要留边。 */
.page-banner{
  position:relative;
  width:100%;
  height:clamp(240px, 34vw, 420px);
  overflow:hidden;
  background:var(--surface-3)}
.page-banner-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center}
/* 上传的是竖图/小图时，cover 会把两边裁掉。object-position 可调，
   默认居中；这里额外允许后台通过行内 style 覆盖（暂未使用）。 */

/* 移动端：横幅太高压屏 */
@media(max-width:860px){
  .page-banner{height:clamp(180px, 46vw, 280px)}
}

/* 横幅之后紧跟 .interior-body 时，间距由 .interior-body 自己控制
   （44px）。这里不额外加 margin，避免和 section-padding 叠加。 */

/* ── 页脚社交图标（2026-10-13 修正）──────────────────────────────
   原来这些规则全部写成 `.social-dots span`，但模板里容器内是
   **<a>**（社交入口是链接）。选择器对不上，样式一直没生效 ——
   配了链接也不显示成圆形图标。现在统一改成 `.social-dots a`。

   顺带补了状态样式：原来只有 span 变体没有 hover。 */
.social-dots a{
  display:grid; place-items:center;
  text-decoration:none;
  transition:border-color .2s, color .2s, background .2s}
.social-dots a:hover{border-color:var(--accent); color:var(--accent)}
/* 品牌 SVG 图标（2026-10-13 替换 in/ig/f/yt 字母缩写）
   内联 SVG 用 fill="currentColor"，自动跟随 .social-dots a 的 color，
   六套主题切换时图标颜色一起变，不用换图。
   14px 是 28px 方框里的舒适值：留 7px 内边距，图形不会顶到边框。 */
.social-icon{
  width:14px;
  height:14px;
  display:block;
  fill:currentColor}
/* Facebook 的 f 和 YouTube 的播放键在 24×24 网格里占比偏小，
   放大到 15px 才和其他三个视觉重量一致 */
.social-dots a[aria-label="Facebook"] .social-icon,
.social-dots a[aria-label="YouTube"] .social-icon,
.social-dots a[aria-label="WeChat"] .social-icon{width:15px;height:15px}
/* Instagram 那个是圆角方框，本身就接近正方形满格，不需要放大 */

/* ── 左侧悬浮社媒栏（2026-10-17）─────────────────────────
   需求：网站左边竖排浮动几个社媒图标，整体橙色。
   图标与页脚共用 includes/social_links.html，所以这里的 <a> 结构
   同 .social-dots，只是换成竖排固定定位 + 统一橙色主题色。
   橙色写死（--ss-orange）而不跟 var(--accent) —— 用户明确要「橙色」，
   而 --accent 会随六套主题变色。SVG 用 fill=currentColor，继承 <a> 的
   color，因此 hover 反白时图标一起变白。
   定位：fixed 左侧垂直居中，z-index 高于内容、低于 Wagtail 管理条。
   ≤860px 隐藏（与站内移动端断点一致）—— 小屏没有安全边距，
   圆点会盖住正文与汉堡菜单。 */
.social-sidebar{
  --ss-orange:var(--accent);   /* 2026-10-26：从写死橙色 #e85d04 改为跟随主题强调色，
                                  换主题（如 kraken 紫）时悬浮栏自动同色 */
  position:fixed;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:55;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px}
.social-sidebar-label{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:9px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ss-orange);
  margin-bottom:2px}
.social-sidebar-icons{display:flex;flex-direction:column;gap:8px}
.social-sidebar a{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--ss-orange);
  background:var(--surface);
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  transition:color .2s, background .2s, border-color .2s, transform .2s}
.social-sidebar a:hover{
  color:#fff;
  background:var(--ss-orange);
  border-color:var(--ss-orange);
  transform:translateY(-2px)}
.social-sidebar .social-icon{width:16px;height:16px}
.social-sidebar a[aria-label="WeChat"] .social-icon{width:17px;height:17px}
@media(max-width:860px){.social-sidebar{display:none}}

/* ── 联系页社媒图标栏（2026-10-18）───────────────────────────
   展示与页脚/左侧悬浮栏同一份 social_links.html。
   为什么不用 .social-dots：那套被各主题的全局规则
   html[data-theme=..] .social-dots a{color:var(--on-dark-soft);border-color:rgba(255,255,255,.28)}
   染成页脚深底专用色，放联系页浅底上图标会“白到看不见”（且那条选择器
   特异度比我高、盖不住）。所以另起 .contact-social-links，颜色回到主题
   强调色 --accent，浅底可读；hover 填实为强调色底 + 反白图标。
   SVG 依旧 fill=currentColor，自动继承 <a> 的 color，换主题不需换图。 */
.contact-social{margin-top:26px}
.contact-social-label{font-size:9px;letter-spacing:.14em;color:var(--faint);font-weight:600;margin-bottom:12px}
.contact-social-links{display:flex;flex-wrap:wrap;gap:9px}
.contact-social-links a{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--accent);
  background:var(--surface);
  border:1px solid var(--line);
  text-decoration:none;
  transition:color .2s, background .2s, border-color .2s, transform .2s}
.contact-social-links a:hover{
  color:#fff;
  background:var(--accent);
  border-color:var(--accent);
  transform:translateY(-2px)}
.contact-social-links .social-icon{width:16px;height:16px}
.contact-social-links a[aria-label="Facebook"] .social-icon,
.contact-social-links a[aria-label="YouTube"] .social-icon,
.contact-social-links a[aria-label="WeChat"] .social-icon{width:17px;height:17px}

/* ── About 页：正文容器宽度对齐其他页面（2026-10-13）──────────────
   问题：About 页的文字块用 `.content-narrow`（max-width:900px），
   而同页的「优势卡片」「客户评价」用的是普通 `.container`（1200px）。
   同一页里容器宽度 900 ↔ 1200 来回跳，看起来不协调（用户反馈）。

   改法：**不动文字的易读宽度，只放开容器**。
     · `.about-page-text` 容器去掉 max-width，与其他区块一样 1200px；
     · 文字本身仍受 `.large-body{max-width:760px}` 约束 ——
       一行 760px 以内（约 75–80 个英文字符）是舒适阅读区间，
       拉到 1200px 反而会让人一行扫太长容易串行。
   所以是「容器对齐、段落宽度不变」—— 视觉边界齐了，阅读体验没牺牲。 */
.about-page-text{max-width:none}

/* ── About 页正文全部居中（2026-10-16）────────────────────────
   用户要求正文从靠左改为居中。三个配套点，缺一个都不齐：
   · 限宽元素（.page-lede 720px / .large-body 760~790px）必须加
     margin-inline:auto —— text-align 只管块内的行内内容，
     块本身仍会贴在容器左侧，看起来就是「歪的居中」；
   · 富文本里插入的图是块级 <img>，同样用 margin-inline:auto 居中；
   · 卡片（values-grid）、图文模块（factory-teaser-grid）保持原双栏/网格
     版式，不跟着居中 —— 它们不是「正文」，拉平了反而难看。
   .about-content 已在核心层改为 text-align:center（见 L306 附近）。 */
.about-extra-section{text-align:center}
.about-content .page-lede,
.about-content .large-body,
.about-extra-section .large-body{margin-inline:auto}
.about-page-text img{margin-inline:auto}

/* ── About 页：标题/简介/正文放开宽度，与站点主体宽幅一致（2026-10-16）──────
   用户要求 About 文案不再被 720/760px 的易读宽度限制，而是撑满 .container
   （--container：80vw 流式、上限 1720px），与页面其它区块同宽。
   只作用于 About 页的 .about-content / .about-extra-section 作用域 ——
   .page-lede、.large-body 在首页 rich_content、产品详情、contact 也在用，
   不能全局改。max-width:none 后块铺满容器，text-align:center 仍让文字居中。 */
.about-content .page-lede,
.about-content .large-body,
.about-content>p:not(.large-body),
.about-extra-section .page-lede,
.about-extra-section .large-body{max-width:none}

/* ── 博客详情 / About / FAQ：正文收窄、边距加大（2026-10-16，二轮再收）─────
   需求：这三页主体宽幅缩小一点、左右留白更大，但不动导航与顶部通栏横幅大图；
   二轮：再收窄一档，且博客封面图与正文同宽。
   做法：三页根 <section> 各加作用域类（page-about / page-faq / page-blog-detail），
   只在其内部收窄 .container / 文字块：
     · About、FAQ 的通栏横幅是 .page-banner（不是 .container），天然不受影响；
     · 博客详情的封面图 .article-cover 与文字块一起收到 980px（同宽）；
   导航在 <header>、页脚在 <footer>，都在这些 section 之外，不受波及。
   仅在 ≥1101px 生效（与既有大屏规则同档），移动端布局原样。 */
@media(min-width:1101px){
  .page-about .container,
  .page-faq .container{max-width:1000px}
  .page-blog-detail .article-header,
  .page-blog-detail .article-lede,
  .page-blog-detail .article-body,
  .page-blog-detail .article-cta,
  .page-blog-detail .article-cover{max-width:980px}
}

/* ── 站内搜索（2026-10-13）────────────────────────────────────────
   导航右侧原来是「Inquiry / Get a Quote」按钮，按用户要求换成搜索框。
   注意：class 用 .nav-search 而**不是沿用 .nav-cta** —— 后者的
   padding/gap/font-weight 全是给按钮写的，套在 input 上会错位。
   旧的 .nav-cta 规则留在样式表里没删（可能还有别处在用），
   但页头这个位置已经换成搜索框了。 */

.nav-search{
  position:relative;
  display:flex;
  align-items:center;
  flex:0 0 auto}
.nav-search input{
  /* 218px 不是随手取的：默认占位文字「Search products and articles」
     在 11px 下约需 155px，加上左右 padding 32+12=44px 和 2px 边框正好
     221px。原先 190px 会把最后一个词截成 "articl"。
     240px 怕挤到「Contact Us」，实测 1440px 下右侧仍余 40px+。 */
  width:218px;
  height:38px;
  padding:0 12px 0 32px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--ink-soft);
  font-size:11px;
  outline:none;
  transition:border-color .2s, box-shadow .2s, width .2s}
/* 聚焦时略微变宽 —— 提示「这里可以输入」，但不跳版式 */
.nav-search input:focus{
  border-color:var(--line-strong);
  box-shadow:0 0 0 3px var(--focus-ring);
  width:258px}
.nav-search input::placeholder{color:var(--faint)}
/* type=search 在部分浏览器自带清除按钮，和我们自己的样式打架时隐藏 */
.nav-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.nav-search-icon{
  position:absolute;
  left:11px;
  width:13px;
  height:13px;
  color:var(--faint);
  pointer-events:none;  /* 不挡点击，点了能聚焦到输入框 */}

/* ── 搜索结果页 ── */
.search-body{padding-top:52px}
.search-page-head{margin-bottom:22px}
.search-page-intro{color:var(--muted);font-size:12px;line-height:1.8;max-width:620px}

.search-form{
  position:relative;
  display:flex;
  gap:10px;
  max-width:640px;
  margin-bottom:34px}
.search-form input{
  flex:1 1 auto;
  min-width:0;            /* flex 子项默认 min-width:auto，长内容会撑破容器 */
  height:46px;
  padding:0 14px 0 40px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--ink);
  font-size:13px;
  outline:none;
  transition:border-color .2s, box-shadow .2s}
.search-form input:focus{
  border-color:var(--line-strong);
  box-shadow:0 0 0 3px var(--focus-ring)}
.search-form-icon{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  color:var(--faint);
  pointer-events:none}
.search-form button{flex:0 0 auto;height:46px}

.search-count{
  font-size:11px;
  color:var(--faint);
  letter-spacing:.04em;
  padding-bottom:16px;
  margin-bottom:26px;
  border-bottom:1px solid var(--line)}

.search-group{margin-bottom:44px}
/* 分组标题右边的数字徽标 */
.search-group-title{
  font-family:var(--font-display);
  font-size:22px;
  letter-spacing:-.04em;
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:9px}
.search-group-title span{
  font-family:var(--font-sans);
  font-size:9px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--muted);
  background:var(--surface-3);
  border-radius:var(--radius-pill);
  padding:3px 8px}

.search-category-list{
  display:flex;
  flex-wrap:wrap;
  gap:9px}
.search-category{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 15px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  text-decoration:none;
  transition:border-color .2s, background .2s}
.search-category:hover{border-color:var(--line-strong); background:var(--surface-3)}
.search-category strong{font-size:12px;color:var(--ink)}
.search-category span{font-size:9px;color:var(--muted);letter-spacing:.05em}

.search-start{
  background:var(--surface-3);
  border-radius:var(--radius-md);
  padding:34px 28px;
  max-width:640px}
.search-start h2{
  font-family:var(--font-display);
  font-size:24px;
  letter-spacing:-.04em;
  margin:0 0 8px}
.search-start p{font-size:12px;color:var(--muted);line-height:1.8;margin:0}

/* ── 中屏收窄（2026-10-13）────────────────────────────────────────
   换搜索框时新冒出来的溢出：.nav-wrap 是 flex，桌面菜单本身宽度
   接近容器上限，再塞进一个 218px 的输入框，861~1123px 区间就横向
   撑破（scrollWidth > clientWidth）。实测按下面三档收窄 + gap 降到
   22px 后，1440 / 1280 / 1121 / 1120 / 1001 / 1000 / 901 / 900 /
   890 / 862 / 861 / 800 / 768 / 621 / 620 / 600 / 500 全部无溢出。
   断点取值有重叠是故意的：1000/900 同时命中两个条件也无冲突，
   因为各自的声明互不覆盖同一属性。 */
@media(max-width:1120px){
  .nav-search input{width:140px}
  .nav-search input:focus{width:160px}
}
@media(max-width:1000px){
  /* 桌面菜单本来就挤，22px 是这批断点里最宽还塞得下的值 */
  .nav-wrap{gap:22px}
}
@media(max-width:900px){
  .nav-search input{width:104px}
  .nav-search input:focus{width:118px}
}

/* ── 移动端 ──
   页头在小屏是「汉堡 + 搜索框」两件套。原来按钮用 order:2、
   汉堡 order:3 + margin-left:auto 把它推到最右，搜索框沿用同样的 order。 */
@media(max-width:860px){
  .nav-search{order:2}
  .nav-search input{width:132px;height:34px;font-size:11px;padding-left:28px}
  .nav-search input:focus{width:150px}
  .nav-search-icon{left:9px;width:12px;height:12px}
  .search-body{padding-top:36px}
  .search-form{flex-wrap:wrap}
  .search-form button{width:100%}
}

/* ≤600px 页头的横向溢出（2026-10-13 修）
   500px 视口下实测：.brand 259 + 搜索框 132 + 汉堡 51 + 两个 14px 间距 = 470px，
   但 .nav-wrap 内宽只有 464px（两侧各 18px 外边距）→ 汉堡右边缘顶到 504px，
   比视口宽 4px，手机上会出现横向滚动条。
   把搜索框在窄屏再收一档（104px）就够：414 + 28 = 442 < 464，留 22px 余量。
   注意这条必须排在上面 ≤860 那条之后 —— 两条选择器同权重，靠顺序决定胜负。 */
@media(max-width:600px){
  .nav-search input{width:104px}
  .nav-search input:focus{width:118px}
}

/* ── 首页询盘表单（2026-10-13）──────────────────────────────
   首页内嵌的 contact us 区块（StreamField 的 inquiry_form）。
   左边是「为什么写信给我们」的要点栏，右边是 InquiryForm 本体。

   栅格刻意照抄 .contact-layout 的比例与断点，这样首页和 /contact/
   看起来是同一套版式 —— 改一处配色/间距，两个页面同时变。
   唯一多出来的是 --form-only 修饰类：side_points 被清空时切单列。 */
.home-inquiry-grid{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:84px;
  align-items:start}
.home-inquiry-grid--form-only{grid-template-columns:1fr}
.home-inquiry-aside{padding-top:5px}
.home-inquiry-points{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:11px;
  color:var(--ink-soft);
  font-size:13px}
.home-inquiry-points li{
  display:flex;
  align-items:flex-start;
  gap:11px;
  line-height:1.7}
/* 短横标记，宽度锁死，保证 4 条要点左边缘齐平 */
.home-inquiry-points .point-dot{
  flex:0 0 14px;
  width:14px;
  height:1px;
  margin-top:11px;
  background:var(--line-strong)}
.home-inquiry-card{padding:38px}

/* 提交成功/失败的提示条（messages 框架）。高度不固定，
   因为它既承载「已发送」也可能承载警告。 */
.form-flash{
  background:var(--gold-tint);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-md);
  padding:14px 18px;
  margin-bottom:20px;
  font-size:13px;
  line-height:1.7;
  color:var(--ink-soft)}

/* 成功/失败提示条的着色（2026-10-14）。这里刻意不用主题令牌、用固定的
   语义色 —— 主题的 --accent-text 追求「和品牌配色协调」，但提交结果
   提示要的是「一眼看出成没成」，六个主题下语义都得成立。 */
.form-flash--success{
  background:#eaf7f0;
  border-color:#bfe3d1;
  border-left-color:#2e9e6b;
  color:#1d5c40}
.form-flash--success::before{content:"\2713";font-weight:700;margin-right:8px}
.form-flash--warning,.form-flash--error{
  background:#fdeeed;
  border-color:#f4c7c3;
  border-left-color:#d93025;
  color:#9f2a20}
.form-flash--warning::before,.form-flash--error::before{content:"!";font-weight:700;margin-right:8px}

/* 整表校验失败的汇总横幅（2026-10-14）：放在表单顶部、字段红字之上。
   买家不用逐行找到底哪红了，先知道「没提交成功、下面要改」。 */
.form-alert{
  border:1px solid #f4c7c3;
  border-left:4px solid #d93025;
  background:#fdeeed;
  border-radius:var(--radius-md);
  padding:13px 16px;
  margin:0 0 18px;
  font-size:13px;
  line-height:1.65;
  color:#9f2a20}

/* 字段级错误。全站此前没有这条规则，/contact/ 的报错也是裸 div ——
   一并补上，两个表单同时受益。 */
.form-errors{
  margin-top:6px;
  font-size:12px;
  line-height:1.6;
  color:var(--accent-text)}

/* Django 渲染 {{ field.errors }} 得到的是 <ul class="errorlist">，
   把默认的小圆点列表拉成和 .form-errors 一致的样子：
   去掉项目符号、去掉缩进，紧跟在输入框下面。 */
.inquiry-form .errorlist{
  list-style:none;
  margin:7px 0 0;
  padding:0;
  font-size:12px;
  line-height:1.6;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--accent-text)}
.inquiry-form .errorlist li{font-weight:500}
/* 同意条款的报错在 .consent-check 的 <span> 里，让它掉到下一行不挤坏勾选框 */
.consent-check .errorlist{margin-top:4px}

@media(max-width:860px){
  .home-inquiry-grid{grid-template-columns:.75fr 1.25fr;gap:44px}
  .home-inquiry-grid--form-only{grid-template-columns:1fr}
  .home-inquiry-points{font-size:12px;gap:9px}
  .home-inquiry-card{padding:26px 20px}
}
@media(max-width:600px){
  /* 单列后要点改成两栏，4 条只占两行，省纵向空间 */
  .home-inquiry-grid{grid-template-columns:1fr;gap:30px}
  .home-inquiry-points{grid-template-columns:1fr 1fr;gap:9px 16px}
}

/* ════════════════════════════════════════════════════════════════
   「为什么选择我们」模块（ .why-choose-section ）
   2026-10-14 新增。版式：居中大标题 + 两/三列「图标 + 标题 + 说明」。
   图标留空时输出品牌爪印 SVG，颜色随主题令牌（--accent-text，
   而不是 --accent —— 后者在白底上只有 2.8:1，当图形也偏淡）。
   注意：这一整段是新类名，不会盖到任何已有断点。
   ════════════════════════════════════════════════════════════════ */
.why-choose-heading{
  text-align:center;
  max-width:620px;
  margin-left:auto;
  margin-right:auto}
/* .eyebrow 本身是 display:flex，居中要居到它自己身上 */
.why-choose-heading .eyebrow{justify-content:center}
.why-choose-heading .section-intro{margin-left:auto;margin-right:auto}

.why-choose-grid{display:grid;gap:46px 60px}
.why-choose-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.why-choose-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.why-choose-item{display:flex;align-items:flex-start;gap:18px}
.why-choose-icon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:var(--accent-text);
  margin-top:1px}
.why-choose-icon svg{width:100%;height:100%;display:block}
.why-choose-glyph{font-size:22px;line-height:1}
.why-choose-copy h3{font-size:16.5px;margin:0 0 9px}
.why-choose-copy p{
  font-size:13.5px;
  line-height:1.8;
  color:var(--muted);
  margin:0;
  max-width:470px}

/* ════════════════════════════════════════════════════════════════
   「文字内容」模块（ .text-content-section ）
   2026-10-14 新增。整块内容由后台富文本编辑器产出，
   这里只负责把「编辑器里排的版」渲染好看：标题走衬线体、正文放宽行高、
   引用块加金色竖线、分隔线用主题描边色。
   ════════════════════════════════════════════════════════════════ */
.text-content-body{font-size:16px;line-height:1.9;color:var(--ink-soft)}
.text-content-body--narrow{max-width:800px;margin-left:auto;margin-right:auto}
.text-content-body--wide{max-width:100%}
.text-content-body .eyebrow{margin-bottom:20px}
/* richtext 过滤器会自己包一层 <div class="rich-text">，首个子元素的上边距要抹掉，
   否则 .section-padding 之外还会多出一截空白 */
.text-content-body .rich-text>*:first-child,
.text-content-body>*:first-child{margin-top:0}
.text-content-body h2,.text-content-body h3{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.18;
  color:var(--ink);
  margin:1.7em 0 .55em}
.text-content-body h2{font-size:clamp(28px,3.4vw,38px)}
.text-content-body h3{font-size:clamp(21px,2.5vw,27px)}
/* H4 是「正文小标题」，字号偏小时衬线体会糊，仍用无衬线体 */
.text-content-body h4{
  font-family:var(--font-sans);
  font-size:17px;
  font-weight:600;
  letter-spacing:0;
  color:var(--ink);
  margin:1.6em 0 .5em}
.text-content-body p{margin:0 0 20px}
.text-content-body strong{font-weight:600;color:var(--ink)}
.text-content-body em{font-style:italic}
.text-content-body a{
  color:var(--accent-text);
  text-decoration:underline;
  text-underline-offset:3px}
.text-content-body ul,.text-content-body ol{margin:0 0 20px;padding-left:24px}
.text-content-body ul{list-style:disc}
.text-content-body ol{list-style:decimal}
.text-content-body li{margin:0 0 9px}
.text-content-body li::marker{color:var(--gold-ink)}
.text-content-body blockquote{
  margin:30px 0;
  padding:2px 0 2px 22px;
  border-left:2px solid var(--gold);
  color:var(--muted);
  font-style:italic}
.text-content-body blockquote p:last-child{margin-bottom:0}
.text-content-body hr{
  border:0;
  border-top:1px solid var(--line);
  margin:40px 0}
.text-content-body img{max-width:100%;height:auto;border-radius:var(--radius-md)}

/* ── 富文本新特性：对齐 / 字号 / 字体 / 颜色 / 高亮（2026-10-14）──
   对齐（<p style="text-align:…">）、字号 / 字体 / 颜色（<span style="…">）
   都是行内样式，浏览器原生生效，不用写规则 —— 但**不能**给 .text-content-body
   的 p 加 text-align 覆写，否则会盖掉编辑者选的对齐。
   这里只补标签观感：高亮、行内代码、下划线偏移、删除线降色、上下标字号。 */
.text-content-body mark{
  background:var(--rt-mark-bg);
  color:inherit;
  padding:0 .14em;
  border-radius:var(--radius-xs)}
.text-content-body code{
  font-family:var(--font-mono);
  font-size:.9em;
  background:var(--surface-3);
  padding:.12em .38em;
  border-radius:var(--radius-xs)}
.text-content-body u{text-underline-offset:3px}
.text-content-body s{color:var(--muted)}
.text-content-body sub,.text-content-body sup{font-size:.72em}

/* ════════════════════════════════════════════════════════════════
   .large-body 的富文本排版（2026-10-14）
   .large-body 是「大段富文本」容器，四个地方在用：首页 rich_content /
   story 模块、产品详情「产品详细说明」、About 页两个模块。原先它只有
   一行 font-size:18px，里面的 h2/h3/ul/ol/blockquote 全是浏览器默认
   样式 —— 产品详细说明换成完整富文本编辑器后，这里必须补齐。
   规则与 .text-content-body 同构，只是基准字号 18px、标题相应放大。
   注意：**不要**给 p 加 text-align 覆写，会盖掉编辑者选的对齐。
   ════════════════════════════════════════════════════════════════ */
.large-body .rich-text>*:first-child,
.large-body>*:first-child{margin-top:0}
.large-body h2,.large-body h3{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.2;
  color:var(--ink);
  margin:1.6em 0 .55em}
.large-body h2{font-size:clamp(24px,3vw,32px)}
.large-body h3{font-size:clamp(19px,2.3vw,24px)}
/* H4 是「正文小标题」，字号偏小时衬线体会糊，仍用无衬线体 */
.large-body h4{
  font-family:var(--font-sans);
  font-size:17px;
  font-weight:600;
  letter-spacing:0;
  color:var(--ink);
  margin:1.5em 0 .5em}
.large-body p{margin:0 0 20px}
.large-body strong{font-weight:600;color:var(--ink)}
.large-body em{font-style:italic}
.large-body a{
  color:var(--accent-text);
  text-decoration:underline;
  text-underline-offset:3px}
.large-body ul,.large-body ol{margin:0 0 20px;padding-left:24px}
.large-body ul{list-style:disc}
.large-body ol{list-style:decimal}
.large-body li{margin:0 0 9px}
.large-body li::marker{color:var(--gold-ink)}
.large-body blockquote{
  margin:30px 0;
  padding:2px 0 2px 22px;
  border-left:2px solid var(--gold);
  color:var(--muted);
  font-style:italic}
.large-body blockquote p:last-child{margin-bottom:0}
.large-body hr{
  border:0;
  border-top:1px solid var(--line);
  margin:40px 0}
.large-body img{max-width:100%;height:auto;border-radius:var(--radius-md)}
.large-body mark{
  background:var(--rt-mark-bg);
  color:inherit;
  padding:0 .14em;
  border-radius:var(--radius-xs)}
.large-body code{
  font-family:var(--font-mono);
  font-size:.9em;
  background:var(--surface-3);
  padding:.12em .38em;
  border-radius:var(--radius-xs)}
.large-body u{text-underline-offset:3px}
.large-body s{color:var(--muted)}
.large-body sub,.large-body sup{font-size:.72em}

/* ── 富文本正文里的表格（2026-10-16，TinyMCE 编辑器接入后可插表格）────
   TinyMCE 插入的是裸 <table>，出现在 .large-body（About/产品故事）、
   .article-body（博客）、.text-content-body（页面搭建正文块）里。
   产品规格表专属的 .detail-tables 有自己的样式，不在这段里。 */
.large-body table,.article-body table,.text-content-body table{
  width:100%;
  border-collapse:collapse;
  margin:28px 0;
  font-size:13px;
  line-height:1.7}
.large-body th,.article-body th,.text-content-body th,
.large-body td,.article-body td,.text-content-body td{
  border:1px solid var(--line);
  padding:9px 13px;
  text-align:left;
  vertical-align:top}
.large-body th,.article-body th,.text-content-body th{
  background:var(--surface-2);
  color:var(--ink);
  font-weight:600;
  letter-spacing:.02em}
.large-body td,.article-body td,.text-content-body td{color:var(--ink-soft)}
.large-body tr:nth-child(even) td,.article-body tr:nth-child(even) td,
.text-content-body tr:nth-child(even) td{background:var(--paper)}
@media(max-width:760px){
  /* 窄屏下表格内容改横向滚动，避免列被挤到没法看 */
  .large-body table,.article-body table,.text-content-body table{
    display:block;
    width:auto;
    min-width:100%;
    overflow-x:auto}
}

/* 三列在中等宽度下先掉到两列，再掉到一列 —— 直接跳到一列会让中间尺寸很难看 */
@media(max-width:980px){
  .why-choose-grid{gap:38px 40px}
  .why-choose-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .why-choose-grid{gap:32px}
  .why-choose-grid--2,.why-choose-grid--3{grid-template-columns:1fr}
  .why-choose-copy p{max-width:none}
  .text-content-body{font-size:15.5px}
}

/* ════════════════════════════════════════════════════════════════
   首页「精选产品」轮播（ .product-carousel，2026-10-14 新增）
   ────────────────────────────────────────────────────────────
   「一屏放几张」只由 --carousel-per 一个数决定（断点里只改它），
   卡片宽度用 calc 从这个数推出来 —— 所以脚本不需要知道断点规则，
   以后调断点不用动 JS。

   脚本只负责翻页；脚本不执行时这里仍是 overflow-x:auto，
   访客可以自己左右拖动查看后面的产品。

   注意：这一段全是新类名（.product-carousel* / .carousel-*），
   不会盖到已有的 .product-grid 断点。
   ════════════════════════════════════════════════════════════════ */

/* 标题右侧那组：文字链接 + 左右箭头 */
.heading-controls{display:flex;align-items:center;gap:24px;flex-wrap:wrap}

.carousel-controls{display:flex;align-items:center;gap:10px}
.carousel-controls:empty,
.carousel-controls.is-hidden{display:none}

.carousel-arrow{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  border-radius:50%;
  background:var(--surface);
  color:var(--ink);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.carousel-arrow:hover:not(:disabled){
  background:var(--accent);
  color:var(--accent-contrast);
  border-color:var(--accent)}
.carousel-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.carousel-arrow:disabled{opacity:.34;cursor:default}

.product-carousel{--carousel-gap:22px;--carousel-per:4}

.product-carousel-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* 上下留出卡片抬升（4px）与投影（blur 35px）的空间，再用负外边距抵消：
     外框位置和静态网格完全一致，悬停时投影也不会被 overflow 裁掉 */
  padding:6px 0 40px;
  margin:-6px 0 -40px}
.product-carousel-viewport::-webkit-scrollbar{display:none}
.product-carousel-viewport:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.product-carousel-track{
  display:flex;
  gap:var(--carousel-gap);
  margin:0;
  padding:0;
  list-style:none}
.product-carousel-slide{
  /* ⚠ flex-shrink 必须是 0（写 `flex:1 1 …` 会踩）：
     shrink 默认 1，当卡片数超过一屏（6 张 / 一屏 4 张）时，
     浏览器会把 6 张一起压缩到容器里 —— 结果是「一屏塞下 6 张」，
     轮播永远滚不动（实测 maxScroll=0、perView=6）。
     grow 保 1：产品不够铺满一行时（例如 3 张 / 一屏 4 张）
     卡片均分剩余空间铺满，而不是右边空一块。 */
  flex:1 0 calc((100% - (var(--carousel-per) - 1) * var(--carousel-gap)) / var(--carousel-per));
  min-width:0;
  display:flex;
  scroll-snap-align:start}
.product-carousel-slide > .product-card{flex:1 1 auto;min-width:0}

.carousel-dots{display:flex;justify-content:center;gap:9px;margin-top:24px}
.carousel-dots:empty{display:none}
.carousel-dot{
  width:34px;
  height:4px;
  padding:0;
  border:0;
  border-radius:2px;
  background:var(--line-strong);
  cursor:pointer;
  transition:background .25s,width .25s}
.carousel-dot:hover{background:var(--muted)}
.carousel-dot.is-active{background:var(--accent);width:54px}
.carousel-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(max-width:1100px){
  .product-carousel{--carousel-per:3}
}
@media(max-width:860px){
  .product-carousel{--carousel-per:2;--carousel-gap:17px}
}
@media(max-width:600px){
  /* 手机上一屏 1.15 张：下一张露一条边，暗示「还能往右滑」 */
  .product-carousel{--carousel-per:1.15;--carousel-gap:11px}
  .carousel-arrow{width:36px;height:36px}
  .carousel-dots{margin-top:18px}
  .heading-controls{gap:16px}
}

/* ════════════════════════════════════════════════════════════════
   产品分类的层级缩进（ .is-child ）  —— 2026-10-14 新增

   分类支持二级（乃至更深）之后，三处前台分类列表都要把「谁是下一级」
   用视觉表达出来：导航下拉、产品页筛选栏、搜索结果页。
   后台列表和选择器弹窗里的缩进不在这里 —— 那是让 Python 直接往名称里
   写不断行空格（ProductCategory.admin_indented_name），跟样式表无关。

   缩进量统一由模板写在元素上的 --cat-depth 决定（一级分类不加这个变量，
   也就不会带 is-child 这个类）：
       缩进 = 每级步长 × 深度
   所以三级、四级都不用再补 CSS，模板里 {{ category.depth }} 会自己算。

   ⚠ 两条必须遵守的写法约定，否则会踩到「追加层盖掉状态样式」这个老坑
   （本文件拼在样式表最末尾，同优先级的规则一律是后面的赢）：

   1) 颜色规则要排除掉 hover / 选中态。
      `.dropdown-menu a:hover{color:var(--accent-text)}` 和
      `.filter-chip.is-selected{color:var(--accent-contrast)}` 的优先级
      都只有「两个类」，和我这里的 `.dropdown-menu a.is-child` /
      `.filter-chip.is-child` 完全一样 —— 直接写颜色就会把悬停和选中态
      一起盖成灰色（选中态甚至会在主色底上写灰字）。所以一律加
      :not(:hover) / :not(.is-selected)。

   2) 缩进用 padding-left / margin-left 长写，不要用 padding 简写。
      移动端媒体查询里还有 `.dropdown-menu a{padding:9px 12px}` 这类简写，
      用简写会把它的上下内边距一起顶掉。
   ════════════════════════════════════════════════════════════════ */

/* ── 页头「Products」下拉 ──────────────────────────────── */
.dropdown-menu a.is-child{
  position:relative;
  padding-left:calc(12px + var(--cat-depth,1) * 15px);
  font-size:11px}
/* ↳ 用绝对定位摆，不影响链接内部「文字在左、箭头在右」的 flex 布局 */
.dropdown-menu a.is-child::before{
  content:"↳";
  position:absolute;
  left:calc(1px + var(--cat-depth,1) * 15px);
  color:var(--faint);
  font-size:10px;
  line-height:1}
.dropdown-menu a.is-child:not(:hover){color:var(--muted)}

/* ── 产品页分类筛选栏 ──────────────────────────────────── */
/* chip 是一排横向的胶囊，缩进只能靠左外边距；再配虚线描边和一级区分开 */
.filter-chip.is-child{
  margin-left:calc(var(--cat-depth,1) * 14px);
  border-style:dashed;
  font-size:10px}
.filter-chip.is-child:not(:hover):not(.is-selected){color:var(--muted)}
.filter-chip.is-child::before{
  content:"↳ ";
  opacity:.65}

/* ── 搜索结果页的分类卡片 ──────────────────────────────── */
.search-category.is-child{
  margin-left:calc(var(--cat-depth,1) * 14px);
  border-style:dashed}
.search-category.is-child strong{color:var(--muted)}

/* ── 首页分类卡片里那行「本类下面有哪些子分类」小字 ────── */
/* 2026-10-14 下午起这行字**只在移动端出现**：桌面端改成鼠标悬停卡片时
   浮出真正的二级分类链接（见文件末尾那段）。回退规则在末尾的
   @media(max-width:860px) 里，那边会把 display 改回 block。
   选择器写成两个类，才压得住 `.category-card-title span`（一个类 + 一个元素）；
   父级 span 在桌面端是右对齐的，这里不设 text-align，跟着父级走就好。 */
.category-card-title .category-sub{
  display:none;
  margin-top:4px;
  color:var(--faint);
  font-size:10px;
  letter-spacing:.05em;
  line-height:1.45}

/* ════════════════════════════════════════════════════════════════
   分类层级：悬停展开（2026-10-14 下午新增）

   上面那一段（.is-child 缩进）解决的是「子分类要看得出来是子分类」，
   这一段把页头和首页两处从「平铺 + 缩进」换成「悬停一级才出现二级」：

     · 页头 Products 下拉 —— 鼠标停在某个一级分类那一行上，
       它的子分类面板从这一行的右边飞出来。
     · 首页分类卡片     —— 鼠标停在某个一级卡片上，
       卡片底部浮出一层，里面是能直接点的二级分类链接。

   产品页筛选栏和搜索结果页这次**没有改**：那两处是「筛选 / 命中」场景，
   把分类藏起来会让人找不到，保持原来的缩进平铺（上面那段照旧生效）。

   ⚠ 移动端（≤860px）没有鼠标悬停，两处都要退回「直接摊开」：
     下拉的子面板变成跟在父级后面的静态块（效果回到改版前的缩进），
     首页卡片则换回那行常驻小字（.category-sub）。
     所以下面每条悬停规则，在末尾的 @media 里都有一条对应回退，别删。

   ⚠ 键盘可达性靠 :focus-within：子面板本身是 visibility:hidden /
     display:none，Tab 键进不去；但一级分类那个链接是可聚焦的，
     焦点落在它身上时 :focus-within 生效、面板显示出来，
     再按 Tab 就能进到子分类链接里。所以 :focus-within 那几条不能省。

   ⚠ 首页卡片里浮出来的子分类是 <a>，所以卡片本身**不能**再是 <a>
     （嵌套锚点会被浏览器拆 DOM）。整卡点击改由 .category-card-hit
     这个透明覆盖层承担，它必须是 .category-card 的直接子元素，
     inset:0 才会按卡片算，z-index 也才比子分类链接低。
   ════════════════════════════════════════════════════════════════ */

/* ── 页头「Products」下拉：悬停一级分类 → 右侧飞出二级 ── */
.dropdown-menu .dropdown-group{position:relative}
/* 这一行既是链接、也是悬停触发器，右侧的 › 提示「里面还有一层」。
   display:flex / padding / 字号颜色都沿用 `.dropdown-menu a` 本来的取值，
   这里不重复声明，免得以后改基础样式时两边对不上。 */
.dropdown-menu .dropdown-parent{cursor:pointer}

.dropdown-submenu{
  position:absolute;
  /* 9px = .dropdown-menu 的 8px 内边距 + 1px 边框，正好贴着菜单外沿 */
  left:calc(100% + 9px);
  top:-9px;                /* 让面板顶边和菜单顶边对齐 */
  width:200px;
  z-index:2;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  padding:8px;
  display:none}
/* 悬停桥：面板和一级行之间隔着菜单那 9px 内边距，鼠标横穿过去时
   :hover 会断一下、面板就会闪。用一条透明伪元素把这道缝盖住接上。 */
.dropdown-submenu::before{
  content:"";
  position:absolute;
  left:-10px;
  top:0;
  bottom:0;
  width:12px}
.dropdown-group:hover .dropdown-submenu,
.dropdown-group:focus-within .dropdown-submenu{display:block}

/* ── 首页分类卡片：悬停一级卡片 → 底部浮出二级分类 ── */
/* 整卡点击的透明覆盖层。必须是 .category-card 的直接子元素。 */
.category-card-hit{position:absolute;inset:0;z-index:1}

/* 浮出层：贴着卡片标题栏的**上沿**往上长，所以会盖住图片最下沿那一条，
   标题栏（分类名 + 简介）仍然露在下面 —— 悬停时还知道自己在看哪个分类。
   用 bottom:100% 是相对 .category-card-title 算的：标题栏是 position:relative，
   它的负外边距让 left/right:0 正好铺满卡片宽度，bottom:100% 就是标题栏上沿。
   卡片自带 overflow:hidden 和 position:relative，所以它跑不出卡片。
   卡片悬停时会上浮 5px，浮出层是卡片的子元素、跟着一起移，不会错位。 */
.category-submenu{
  position:absolute;
  left:0;
  right:0;
  bottom:100%;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  gap:5px 8px;
  padding:12px 20px;
  background:var(--surface);
  border-top:1px solid var(--line);
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .2s ease,visibility .2s ease,transform .2s ease}
.category-card:hover .category-submenu,
.category-card:focus-within .category-submenu{
  opacity:1;
  visibility:visible;
  transform:translateY(0)}
.category-submenu a{
  font-size:10.5px;
  letter-spacing:.06em;
  line-height:1.4;
  color:var(--accent-text);
  border-bottom:1px solid var(--line-strong);
  padding-bottom:1px}
.category-submenu a:hover{color:var(--ink)}

/* ── 没有鼠标悬停的地方：两处都退回「直接摊开」 ────────── */
@media(max-width:860px){
  /* 页头下拉在 ≤860px 本来就是常驻展开的，子面板跟着变静态块、缩进一格 */
  .dropdown-submenu{
    position:static;
    display:block;
    width:auto;
    background:transparent;
    border:0;
    box-shadow:none;
    padding:0;
    margin:0 0 4px 14px}
  .dropdown-submenu::before{display:none}

  /* 首页卡片：浮出层关掉，换回那行常驻小字 */
  .category-submenu{display:none}
  .category-card-title .category-sub{display:block}
}

/* 卡片在 ≤600px 会把内边距收到 12px，浮出层跟着收，否则左右会和卡片错开 */
@media(max-width:600px){
  .category-submenu{padding:10px 12px}
}

/* ════════════════════════════════════════════════════════════════
   图片被 HTML 的 width/height 属性钉死（2026-10-14 修）

   **现象**：首页产品轮播里，只要某个产品传了**上传的照片**（走 {% picture %}），
   那一张卡片就比左右邻居高出两百多像素 —— 图被拉成竖长条、整排卡片错位。
   用 SVG 插画的卡片完全正常，所以看起来「只有一张坏了」。

   **实测**（线上 1440 宽，轮播 9 张）：
       8 张 SVG 插画  <img> 无 width/height 属性 → 282×235，比例 1.20 ✅
       1 张上传照片   <img width="520" height="520"> → 282×520，比例 0.54 ❌

   **原因**：`<img width="520" height="520">` 这两个 HTML 属性会变成**表现性 CSS 提示**
   （等价于作者样式里的 width:520px / height:520px）。原规则只写了 width、没写 height，
   这份提示就赢了 → height 被钉死成 520px。而 **`aspect-ratio` 只在「两维里至少一维是 auto」
   时才生效**，两维都被钉死时它整个被忽略 —— 规则里写的 aspect-ratio:1.16/1 形同虚设。
   最后再被 object-fit:cover 从方形原图里裁一刀，就成了那条竖长条。

   **修法**：显式写 `height:auto`，把高度交还给 aspect-ratio 去算。
   `width:100%` 本来就有、**不能省**（少了它 aspect-ratio 配高度夹子会反推宽度，
   见上面 hero-carousel 那段注释）。

   ⚠ **这个坑之前修过一半**：`.detail-thumb img` 和 `.detail-image-open img`
   早就显式写了 `height:auto`，只有产品卡和博客卡漏了。
   全站排查办法：`aspect-ratio` 用在 img 上的规则，逐条看有没有 height。
   ⚠ `.detail-image img`（1/1 + contain）这条也缺 height。它被上面两条更具体的选择器
   完全覆盖、当前实际不生效（实测详情页 5 张图：缩略图 76×76、主图 412×412，都正常），
   这里仍然补上，免得以后改覆盖关系时踩雷。
   ════════════════════════════════════════════════════════════════ */
.product-image-wrap img,
.blog-image img,
.detail-image img{height:auto}

/* ════════════════════════════════════════════════════════════════
   卡片文字超长不截断 → 整排卡片底部对不齐（2026-10-14 修）

   **现象**：图片那条修好之后，整排卡片高度确实一致了，但**底部仍然不对齐** ——
   短描述的卡下面空一大块，SKU / Inquiry 那条线浮在半空中间。

   **实测**（线上首页第 2 个产品轮播，5 张卡）：
       Cassava cat litter   标题 4 行 / 描述 9 行 → SKU 行在 851px
       其余 4 张            标题 1 行 / 描述 3 行 → SKU 行在 332px
   卡片本身都被 grid 拉成 917px 等高（原样式 `min-height:38px` 只是个**下限**，
   短卡撑不出高度、长卡把整格拉高），但内容是顶对齐的 → 底部参差。
   顺带发现标题里那句 `…plant-based cat litter,deodorizing cat litter`
   在 220px 宽的卡里要占 4 行，本身也不该全露。

   **修法三件事**（缺一不可）：
   1. 标题 `-webkit-line-clamp:2`、描述 `-webkit-line-clamp:3` —— 超出省略号。
      用 `min-height` 而不是 `max-height`：line-clamp 之后元素高度本来就不定，
      给 min-height 才能让「1 行的卡」和「2 行的卡」占一样高。
   2. `.product-card` 转竖向 flex + `.product-card-body{flex:1}` +
      `.product-card-foot{margin-top:auto}` —— 把 SKU 行顶到卡片底部。
      **只做第 1 步不够**：描述 1 行 vs 3 行仍有 40px 差，底部照样参差。
   3. `.product-carousel-slide{display:flex}`（原来没有）——
      轮播的 slide 是 flex item，卡片在 slide 里要靠这条才能撑满 slide 高度，
      否则第 2 步的 `margin-top:auto` 没有可分配的多余空间，等于没写。

   ⚠ **别顺手删 `.product-card p{min-height}`**：它是给「描述为空」兜底的
   （有的产品没填 short_description，全空会让 foot 贴到卡片顶）。
   line-clamp 与 min-height 可以共存，各管一端。

   ⚠⚠ **min-height 必须用 em，不能用 px**（这条是写完探针才发现的）：
   ≤600px 原样式表有一条 `.product-card p{font-size:9px}`，但**它不生效** ——
   本文件上面那条非媒体查询的 `.product-card p{font-size:12.5px}` 排在整份样式表最后，
   同权重把媒体查询的取值盖掉了（就是本文件开头「追加层会盖掉断点」那条铁律）。
   探针实测 600px 下 computed font-size 仍是 **12.5px**。
   所以按 9px 算出来的 min-height 会比实际需要少一截（少预留一行 = 差 17~20px）。
   改用 `em`（= 行数 × line-height，跟随真实字号自适应）就与断点无关了。 */
.product-card{
  display:flex;
  flex-direction:column}
.product-card-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-width:0}
.product-card h3{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  min-height:2.8em}         /* 2 行 × line-height 1.4；em 跟着字号走，不受断点影响 */
.product-card p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
  min-height:4.8em}         /* 3 行 × line-height 1.6 */
.product-card-foot{margin-top:auto}

/* 描述块可点击（2026-10-16）：包描述的 <a> 需撑成整块才能点满区域。
   全局 a{color:inherit;text-decoration:none} 已保证颜色/下划线不变；
   这里补 display:block，并在整卡 hover 时把描述文字略加深作可点反馈。 */
.product-card-desc{display:block;color:inherit}
.product-card:hover .product-card-desc p{color:var(--ink-soft)}

/* 轮播 slide 原来不是 flex 容器，卡片撑不满它 —— 见上面第 3 点 */
.product-carousel-slide{display:flex}
.product-carousel-slide > .product-card{flex:1 1 auto;min-width:0}

/* ≤600px：原样式把 foot 改成 column（SKU 一行、Inquiry 一行）。
   「有 SKU」的卡 foot 高 23px，Inquiry 落在下面；「没 SKU」的只有 Inquiry，
   落在上面 —— 两种卡片的 Inquiry 行又不对齐了。
   解法两条一起上：foot 预留两行高度，再让 Inquiry 用 margin-top:auto 贴住 foot 底部。
   （光给 min-height 不够：没 SKU 时 Inquiry 会贴在 foot 顶部，仍然错位。） */
@media(max-width:600px){
  .product-card-foot{min-height:72px}
  .product-card-foot .product-inquiry{margin-top:auto}
}

/* 博客卡同理：`.blog-card h3` / `.blog-card p` 也超长不截断，
   首页那 3 张实测已经是 2 行 / 2 行（侥幸齐），但标题再长一点就会参差。
   标题留 2 行、摘要留 3 行；blog-card 没有 SKU 行，不需要第 2 步。 */
.blog-card h3{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  min-height:50px}          /* 2 行 × 18px × 1.4 ≈ 50px */
.blog-card p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
  min-height:68px}          /* 3 行 × 13.5px × 1.75 ≈ 71px，取 68 贴近 */
@media(max-width:600px){
  .blog-card h3{min-height:39px}
  .blog-card p{min-height:53px}
}

/* ════════════════════════════════════════════════════════════════
   排版加强：字重（2026-10-14）
   用户原话：「全站的字体要调整一下，太淡了，不清晰。大标题加粗
   加黑，其他都加黑。」

   先用探针取 computed style 查了病灶，实测结果两条：
     1. 全站**正文都是 400** —— body 从来没声明过 font-weight，
        一路继承下来（.section-intro / .product-card p / .blog-card p
        / .service-item p / .final-cta p 全是 400）。
     2. **两个最大的衬线标题还是 400** —— .section-heading h2（47px）
        与 .final-cta h2（48px）。它们来自本文件上面那条「大标题一律
        走衬线体 … font-weight:400」的基调；Palatino / Georgia 在
        400 下笔画本来就细，字越大越显得空。
   （颜色那一路另算：--muted / --faint / --ghost 已在
    editorial_restyle.py 的 TOKEN_BLOCK 里按 WCAG 重解过一遍，
    见 .workbuddy/tools/solve_text_contrast.py。）

   ⚠ 衬线字体栈（--font-display = Iowan Old Style / Palatino /
   Georgia / 宋体）在系统里**只有 Regular(400) 与 Bold(700) 两档**。
   写 500 / 600 不会得到「半粗」—— 按 CSS 字重匹配算法（目标 > 500
   时先向上找）会被取到 700。所以衬线元素**只能用 400 或 700**，
   想「稍微粗一点」是实现不了的，只有两档可选。
   无衬线栈（--font-sans = -apple-system / PingFang SC）有全档位。
   ════════════════════════════════════════════════════════════════ */

/* ── 1. 正文默认 400 → 500 ────────────────────────────────────
   没显式写 font-weight 的文本全部继承它。
   表单控件带 `font:inherit`，会跟着一起变，正是想要的。
   显式写过 400 的地方（.button span、.text-link span 里的箭头
   字形）不受影响 —— 那是有意留细的。 */
body{font-weight:500}

/* ── 2. 大标题：一律 700 ──────────────────────────────────────
   覆盖本文件上面那条 400 的基调。
   不在这一组里的是那些被改成「无衬线 600」的小标题
   （.blog-card h3 / .process-grid h3 / .values-grid h3 /
   .footer-newsletter h3 / .certificate-copy h3 / .detail-specs h3
   / .faq-cta strong）—— 它们保持 600：小字号上无衬线 600
   比衬线粗体更清楚，这是上面那条自己给出的理由。 */
.hero-copy h1,.interior-hero h1,
.section-heading h2,.factory-copy h2,.about-content h2,.contact-info h2,
.final-cta h2,.detail-copy h1,.article-header h1,.detail-extra h2,
.form-card-heading h2,.empty-state h3,.brand-copy strong,
.article-body h2,.text-content-body h2,.text-content-body h3,
.form-success h3,.search-start h2,.search-group-title,
.factory-stat-row strong{font-weight:700}

/* 标题里的斜体强调也跟到 700，否则同一个标题里两种粗细会脱节 */
h1 em,h2 em{font-weight:700}

/* ── 3. 必须钉回 400 的例外 ──────────────────────────────────
   ⚠ 这一条不能省：body 改成 500 之后，**没有自己声明字重的衬线
   元素会从 400 被抬到 700**（500 对只有 400/700 的字体栈向上取整）。
   证言引用本来就该轻、该柔，被悄悄加粗是错的，所以显式压回 400。 */
.testimonial-quote{font-weight:400}

/* 联系页那几个 <b>：它们是「标签：值」里的标签，语义就是强调，
   原样式却写成 400（比正文还轻）。借着这次一并提到 600，
   跟同类的小标签（.contact-detail strong）对齐。 */
.contact-points b{font-weight:600}

/* ══════════════════════════════════════════════════════════════
   大屏自适应（2026-10-15）
   ──────────────────────────────────────────────────────────────
   配合顶部 --container 的 min(1720px, max(1200px, 80vw))：
   ① 超宽屏（2K / 带鱼屏）上限再放宽到 1800px。2026-10-16 边距翻倍后
      流式是 80vw，1800px 上限要到 ≥2250px 视口才够得着，断点随之对齐；
   ② 文字型栏目（FAQ / 富文本等 .content-narrow）900px 是按 1440 屏
      定的阅读宽度，宽容器下显得太瘦，≥1600px 放宽到 1040。
      段落本体另有 .large-body{max-width:790px} 兜底，行长不会失控。
   ③ 博客文章页：三轮迭代。一轮只放宽到 1140，用户反馈「不还是没宽吗」；
      二轮 wrap 吃满容器、header 960、正文 840，用户反馈「图片宽了，
      标题和正文还没有」——结论：这个站的审美取向就是铺满，不再
      按 45em 行长保守设限。三轮：header 100%、正文 1120，用户仍反馈
      「图片下面的正文还是窄的，标题稍微缩一点」——四轮定稿：
      正文/CTA 1280（比 1440 版块只窄 80px，视觉上基本铺满），
      标题从全宽收到 1280 与正文对齐；封面保持通栏 max-height 560。
      1280 正文列在 18.5px 下约 69em，行长很长，是用户明确取向。
      五轮（同日）：标题再收窄到 1180；封面从通栏改为与正文同宽
      （max-width:1280 居中），头部「标题最窄 → 正文/封面同宽」两档对齐。
   ══════════════════════════════════════════════════════════════ */
@media(min-width:2250px){
  :root{--container:1800px}}
@media(min-width:1600px){
  .content-narrow{max-width:1040px}}
@media(min-width:1101px){
  .article-wrap{max-width:min(1440px,100%)}
  .article-header{max-width:1180px}
  .article-body{max-width:1280px}
  .article-cta{max-width:1280px}
  .article-cover{max-height:560px;max-width:1280px;margin:0 auto 35px}}

/* ══════════════════════════════════════════════════════════════
   字号校准层（2026-10-15）
   ──────────────────────────────────────────────────────────────
   需求原话：「除了大标题外，其他的调大点，现在看不协调。」
   二轮（同日）：一轮整体 +1~2px 后用户要求「再大点，大 2px 看看」，
   全层在实时生效值基础上再 +2px。

   做法：非标题文字整体上调，层级相对关系保持不变；
   大标题（衬线 clamp 那一批 h1/h2）与 ≥20px 的卡片级标题不动
   （例外：blog-card h3 / large-body h4 / text-content h4 属于卡片级，
   跟随上调到 20px）。

   ⚠ 两条铁律（同本文件前面「追加层会盖掉断点」的约定）：
   1. 整层包在 @media(min-width:1101px) 里 —— ≤1100px 各断点的
      字号取值原样保留，不参与本次上调；
   2. 基准值以「最终生效值」为准（如 .product-card p 实际是
      L715 的 12.5px 而非核心层的 10px），写之前先用探针清单核实过。

   行数钳制不受影响：.product-card h3/p 的 min-height 用 em（跟字号走）；
   .blog-card 的 min-height 是 px 但余量足够（50px vs 50.4px、68px vs 65.6px）。
   ══════════════════════════════════════════════════════════════ */
@media(min-width:1101px){

  /* ── 全局 ── */
  body{font-size:18px}

  /* ── 页头 / 导航 / 按钮 ── */
  .announcement-bar{font-size:14px}
  .brand-copy small{font-size:11px}
  .nav-link{font-size:15px}
  .dropdown-menu a{font-size:15px}
  .dropdown-menu a.is-child{font-size:14px}
  .button{font-size:15px}
  .button-large{font-size:16px}
  .text-link{font-size:15px}
  .eyebrow{font-size:13px}
  .nav-search input{font-size:14px}

  /* ── 首页轮播 / 服务条 / 分类卡 ── */
  .hero-lede{font-size:18px}
  .hero-micro-proof strong{font-size:14px}
  .hero-micro-proof small{font-size:13px}
  .hero-art-tag strong{font-size:14px}
  .hero-art-tag small{font-size:12px}
  .hero-bottom{font-size:12px}
  .hero-bottom-note{font-size:13px}
  .service-item h3{font-size:15.5px}
  .service-item p{font-size:13.5px}
  .section-intro{font-size:16.5px}
  .category-number{font-size:12px}
  .category-card-title h3{font-size:16px}
  .category-card-title span,
  .category-card-title .category-sub{font-size:12px}
  .category-submenu a{font-size:13.5px}

  /* ── 产品卡 / 工厂版块 ── */
  .product-badge{font-size:11px}
  .product-category{font-size:12px}
  .product-card h3{font-size:17px}
  .product-card p{font-size:15.5px}
  .product-sku{font-size:12px}
  .product-inquiry{font-size:13px}
  .factory-image-label{font-size:12px}
  .factory-copy>p:not(.demo-note){font-size:16px}
  .demo-note{font-size:13px}
  .factory-stat-row span{font-size:12px}
  .home-inquiry-points{font-size:16px}

  /* ── 博客卡 / 结尾 CTA / 页脚 ── */
  .blog-meta{font-size:12px}
  .blog-card h3{font-size:20px}
  .blog-card p{font-size:14.5px}
  .blog-read{font-size:13px}
  .final-cta p{font-size:15px}
  .footer-brand-col>p{font-size:14.5px}
  .footer-col h2{font-size:14px}
  .footer-col h4{font-size:12px}
  .footer-col a{font-size:14.5px}
  .muted-label{font-size:12px}
  .footer-email{font-size:14px}
  .social-dots span{font-size:12px}
  .footer-bottom{font-size:12px}

  /* ── 内页通用 / 产品列表 / 详情 ── */
  .interior-hero p{font-size:16px}
  .floating-sticker{font-size:12px}
  .catalog-count{font-size:14px}
  .filter-chip,
  .filter-chip.is-child{font-size:13px}
  .catalog-bottom{font-size:14px}
  .breadcrumb{font-size:13px}
  .detail-label{font-size:12px}
  .detail-sku{font-size:13px}
  .detail-desc{font-size:16.5px}
  .detail-badges span{font-size:12px}
  .detail-specs h2,
  .detail-specs h3{font-size:15px}
  .spec-row{font-size:14px}
  .spec-empty{font-size:14px}
  .detail-extra p{font-size:15.5px}
  .back-to-products{font-size:14px}
  .detail-gallery-item figcaption{font-size:15px}
  .lb-figure figcaption{font-size:16px}
  .lb-count{font-size:15px}

  /* ── 关于 / 流程 / 富文本 ── */
  .content-kicker{font-size:13px}
  .large-body{font-size:20px}
  .large-body h4{font-size:20px}
  .about-content>p:not(.large-body){font-size:16px}
  .values-grid article>span{font-size:13px}
  .values-grid h3{font-size:17px}
  .values-grid p{font-size:14.5px}
  .placeholder-callout strong{font-size:15px}
  .placeholder-callout p{font-size:14px}
  .process-number{font-size:12px}
  .process-grid h3{font-size:17px}
  .process-grid p{font-size:13.5px}
  .factory-photo-placeholder p{font-size:15px}
  .text-content-body{font-size:18.5px}
  .text-content-body h4{font-size:20px}
  .page-lede{font-size:18px}
  .why-choose-copy h3{font-size:19.5px}
  .why-choose-copy p{font-size:16.5px}

  /* ── 博客文章页 ── */
  .blog-disclaimer{font-size:13px}
  .article-back{font-size:13px}
  .article-lede{font-size:18.5px}
  .article-body p{font-size:18.5px}
  .article-tip{font-size:17px}
  .article-cta strong{font-size:16px}
  .article-cta p{font-size:15px}

  /* ── 联系页 / 询盘表单 / 提示条 ── */
  .contact-info>p{font-size:17px}
  .contact-points{font-size:16px}
  .contact-detail small{font-size:12.5px}
  .contact-detail strong{font-size:16px}
  .contact-note p{font-size:15.5px}
  .form-step{font-size:12px}
  .form-card-heading p{font-size:15.5px}
  .inquiry-form label{font-size:14px}
  .inquiry-form input:not([type=checkbox]),
  .inquiry-form textarea,
  .inquiry-form select{font-size:17px}
  .consent-check{font-size:15.5px}
  .form-privacy{font-size:13.5px}
  .form-success p{font-size:17px}
  .form-flash{font-size:16px}
  .form-alert{font-size:16px}
  .form-errors{font-size:15px}
  .inquiry-form .errorlist{font-size:15px}
  .toast{font-size:16px}
  .empty-state p{font-size:15px}

  /* ── 搜索页 ── */
  .search-page-intro{font-size:15px}
  .search-form input{font-size:16px}
  .search-count{font-size:14px}
  .search-group-title span{font-size:12px}
  .search-category strong{font-size:15px}
  .search-category span{font-size:12px}
  .search-start p{font-size:15px}
}

/* ── 窄桌面（1101~1499px）页头回退一档 ────────────────────────
   1280 实测：15px 加粗菜单把 1200 容器里的固定宽搜索框（218px、
   flex:0 0 auto 不收缩）挤出右缘裁掉。页头是全站信息密度最高、
   唯一会横向溢出的地方，这几个元素在窄桌面退回一轮取值，
   ≥1500px 容器 ≥1350px 后才用全档。 */
@media(min-width:1101px) and (max-width:1499px){
  .nav-link{font-size:13px}
  .dropdown-menu a,
  .dropdown-menu a.is-child{font-size:13px}
  .nav-search input{font-size:12px}
  .announcement-bar{font-size:12px}
}
/* ≥1500px：搜索框字号升到 14px 后，218px 装不下完整占位语
   （「Search products and articles」14px 约 197px + 内外边距 44px），
   实测截成 "artic"。宽屏容器充裕，加宽 32px 补齐；聚焦再加宽一档。 */
@media(min-width:1500px){
  .nav-search input{width:250px}
  .nav-search input:focus{width:290px}
}

/* ── 博客详情页头部（2026-10-15）────────────────────────────
   meta 行（分类 / 阅读时长 / 日期）从标题上方移到标题下方、靠右对齐
   （模板同步调整：blog-meta 移到 h1 之后、导语之前）；
   大标题整体缩一档：clamp(35px,5vw,55px) → (31px,4vw,46px)，
   1920 下 55→46，与放宽后的正文列保持比例。 */
.article-header .blog-meta{margin:12px 0 2px;justify-content:flex-end}
.article-header h1{font-size:clamp(31px,4vw,46px)}

/* 导语移出标题块：模板里 article-lede 已放在 </header> 之后，
   与正文/封面同宽（1280）居中；标题块收窄后底边距也相应减小。 */
.article-header{margin:0 auto 10px}
.article-lede{max-width:1280px;margin:0 auto 32px}
@media(max-width:600px){
  .article-lede{margin:0 auto 26px}}

/* ── 产品详情页（2026-10-15）────────────────────────────────
   1) 操作区只保留一个主按钮：单按钮下加最小宽度让 CTA 更醒目，
      移动端占满整行好点。
   2) 详细说明下方的说明表格（TableBlock 区块）。样式对齐 spec-row
      的细线条风：细边框、表头浅底。窄屏横向滚动防撑破卡片。 */
.detail-actions{margin-top:28px}
/* 2026-10-16：按钮撑满右列（与产品标题 h1 同容器等宽），
   取代原来的 min-width 260px + 窄屏 100% 两段式。 */
.detail-actions .button{width:100%;justify-content:space-between}

/* ── 产品图册下方的「社媒跳转入口」（2026-10-16）───────────────
   位于左栏 .detail-image 卡片内、大图正下方（后台填了 URL 才渲染）。
   白底 + 主题强调色描边/文字的胶囊按钮，hover 填成实心强调色（brand-pop
   下即熔橙）反白；和右栏实心询盘按钮区分语气（这个是「关注」不是主 CTA）。
   图标 fill=currentColor 跟随文字色，换主题自动变色，不用换图。 */
.product-social-entry{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  margin-top:18px;
  padding:13px 16px;
  border:1px solid var(--accent);
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--accent-text);
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  transition:background .2s,color .2s,box-shadow .2s}
.product-social-entry:hover{
  background:var(--accent);
  color:var(--accent-contrast);
  box-shadow:var(--shadow-sm)}
.product-social-entry:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.product-social-entry .pse-icon{flex:0 0 auto;width:20px;height:20px;display:grid;place-items:center}
.product-social-entry .pse-icon svg{width:20px;height:20px;display:block;fill:currentColor}
.product-social-entry .pse-label{flex:1 1 auto;min-width:0}
.product-social-entry .pse-arrow{flex:0 0 auto;font-size:16px;line-height:1;transition:transform .2s}
.product-social-entry:hover .pse-arrow{transform:translate(2px,-2px)}

.detail-tables{margin-top:26px;display:grid;gap:24px;overflow-x:auto}
.detail-tables table{width:100%;border-collapse:collapse;font-size:12px;line-height:1.7}
.detail-tables th,.detail-tables td{border:1px solid var(--line);padding:9px 13px;text-align:left;vertical-align:top}
.detail-tables th{background:var(--surface-2);color:var(--ink);font-weight:600;letter-spacing:.02em}
.detail-tables td{color:var(--ink-soft)}
.detail-tables tr:nth-child(even) td{background:var(--paper)}
@media(max-width:600px){
  .detail-tables{margin-top:20px;gap:18px}
  .detail-tables th,.detail-tables td{padding:8px 10px;font-size:11px}}


/* ── 富文本里的浮动图（2026-10-16，TinyMCE「排版方式」可选左/右浮动）────
   桌面端间距由编辑器插入的内联 style 保证；这里只做窄屏回落：
   浮动取消、居中显示，避免文字环绕在手机上挤成一列窄条。 */
@media(max-width:760px){
  .large-body img[style*="float"],
  .article-body img[style*="float"],
  .text-content-body img[style*="float"]{
    float:none!important;
    display:block;
    width:auto!important;
    max-width:100%;
    margin:26px auto!important}
}

/* ── 悬浮「回到顶部」按钮（2026-10-16）─────────────────────
   右下角固定，滚过一定距离才浮现（.is-visible 由 cms.js 切换），
   点一下平滑回顶。实心主题强调色底（--accent）+ 反白图标，
   brand-pop 下即熔橙、tangerine 下即橙红，随 data-theme 自动换色；
   hover 往深走（--accent-dark）。
   z-index 45：低于吸顶导航(50)/toast(100)/灯箱，不会浮在它们上面。 */
.back-to-top{
  position:fixed;
  right:24px;
  bottom:26px;
  z-index:45;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid var(--accent);
  border-radius:var(--radius-pill);
  background:var(--accent);
  color:var(--accent-contrast);
  box-shadow:var(--shadow-md);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .25s,transform .25s,visibility .25s,background .2s,color .2s,border-color .2s}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.back-to-top:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.back-to-top svg{width:22px;height:22px;display:block}
@media(max-width:860px){.back-to-top{right:16px;bottom:18px;width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none}}

/* ── 分类落地页 / 分类汇总页（2026-10-20）────────────────────────
   分类落地页（/<slug>/）与汇总页（/collections/）复用内页骨架：横幅走
   includes/page_banner.html，产品网格 / 分类卡片 / catalog-toolbar /
   search-category 列表都复用既有类，这里只补标题区和分组的少量样式。 */
.page-listing-head{margin:0 0 30px}
.page-listing-head h1{font-family:var(--font-display);font-size:clamp(34px,4vw,47px);line-height:1.11;font-weight:600;letter-spacing:-.06em;margin:0;color:var(--ink)}
.page-listing-intro{font-size:13px;color:var(--muted);max-width:680px;line-height:1.85;margin:14px 0 0}
.page-listing-intro p{margin:0 0 10px}
.page-listing-intro p:last-child{margin-bottom:0}
.category-children{margin-top:54px;padding-top:40px;border-top:1px solid var(--line)}
.collection-group{margin-top:44px}
.collection-group h2 a{color:inherit}
.collection-group h2 a:hover{color:var(--accent-quiet)}
@media(max-width:600px){.page-listing-head{margin-bottom:22px}.category-children{margin-top:40px;padding-top:28px}}

/* ─ 分类页横幅：按原图比例自适应高度，不裁切（2026-10-21）──────────
   分类 banner 图（如 Cat Supplies 1920×213）自带文字排版，
   用 object-fit:cover + 固定高度会把两侧文字裁掉（笔记本上尤其明显）。
   改成 height:auto + aspect-ratio 让容器高度跟随宽度等比缩放，
   图片完整显示、不裁不拉。aspect-ratio 用 1920/210≈9.14，
   覆盖绝大多数 1920×210~213 的 banner 图。 */
.page-banner.page-banner-category{height:auto;aspect-ratio:1920/210}
.page-banner.page-banner-category .page-banner-img{width:100%;height:auto;display:block}
/* 超宽屏上限：图只有 1920 宽，再宽就居中不拉 */
@media(min-width:1921px){
  .page-banner.page-banner-category .page-banner-img{max-width:1920px;margin-inline:auto}
}

/* ── Cookie 同意横幅（2026-10-21，GDPR）──────────────────────────────
   固定底部深色条，配色全走主题令牌（--dark/--on-dark/--accent），
   六套主题下都自动适配。初始 hidden 由 cookie-consent.js 控制。 */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--dark);color:var(--on-dark);box-shadow:0 -12px 28px -18px rgba(0,0,0,.55)}
.cookie-banner[hidden]{display:none}
.cookie-banner-inner{display:flex;align-items:center;gap:24px;padding-top:16px;padding-bottom:16px}
.cookie-banner-text strong{display:block;font-size:12px;letter-spacing:.02em;margin-bottom:4px}
.cookie-banner-text p{margin:0;font-size:10.5px;line-height:1.7;color:var(--on-dark-soft);max-width:780px}
.cookie-banner-text a{color:var(--on-dark);text-decoration:underline;text-underline-offset:2px}
.cookie-banner-actions{display:flex;gap:10px;margin-left:auto;flex-shrink:0}
.cookie-btn{cursor:pointer;border-radius:var(--radius-sm);padding:11px 16px;font-size:10.5px;font-weight:600;font-family:var(--font-sans);line-height:1.2;transition:all .2s}
.cookie-btn-accept{background:var(--accent);color:var(--accent-contrast);border:1px solid var(--accent)}
.cookie-btn-accept:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.cookie-btn-ghost{background:transparent;color:var(--on-dark);border:1px solid rgba(245,241,232,.35)}
.cookie-btn-ghost:hover{border-color:var(--on-dark)}
@media(max-width:700px){
  .cookie-banner-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .cookie-banner-actions{margin-left:0;width:100%}
  .cookie-btn{flex:1;padding-top:12px;padding-bottom:12px}
}

/* ── 隐私与 Cookie 政策页（/privacy/，2026-10-21）───────────────────
   正文排版复用 .article-body（博客详情页同源），这里只补表格和首行小字。 */
.privacy-body h1{font-family:var(--font-display);font-size:clamp(32px,4.5vw,48px);letter-spacing:-.04em;margin:0 0 6px}
.privacy-updated{font-size:10px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase;margin:0 0 28px}
.privacy-body h2{font-size:20px;margin-top:34px}
.privacy-table{width:100%;border-collapse:collapse;margin:18px 0;font-size:11px}
.privacy-table th,.privacy-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;line-height:1.7;color:var(--ink-soft)}
.privacy-table th{background:var(--surface-3);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.privacy-table td:first-child{font-family:var(--font-mono);font-size:10px;white-space:nowrap}
.cookie-settings-btn{margin-top:4px}
@media(max-width:700px){
  .privacy-table th,.privacy-table td{padding:8px;font-size:10px}
  .privacy-table td:first-child{white-space:normal}
}

/* ── About 页工厂图片轮播（2026-10-21）───────────────────────────
   无缝匀速横向滚动：track 渲染两遍图片列表，动画平移 -50% 后回到
   起点，画面恰好衔接。间距用 margin-right 而不是 flex 的 gap ——
   gap 会让两份列表的衔接处少半个间距，动画循环时有轻微跳动。
   时长跟图片数走（--marquee-items × 9s），图片多就不急、少就快些。
   终稿（同日）：标题留在 .container 与正文对齐；滚动条单独控宽
   min(90vw, 1780px) —— 比 --container（80vw/1720px）宽、比满屏窄；
   卡片（clamp(260px, 21vw, 360px)）间距 24px，一屏 3-4 张。 */
.factory-gallery-section .section-heading{margin-bottom:8px}
.factory-marquee{overflow:hidden;margin-top:26px;width:min(90vw,1780px);margin-inline:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.factory-marquee-track{display:flex;width:max-content;align-items:stretch;
  animation:factory-scroll calc(var(--marquee-items,6) * 9s) linear infinite}
.factory-shot{margin:0;margin-right:24px;flex-shrink:0;width:clamp(260px,21vw,360px);aspect-ratio:4/3}
.factory-shot img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--radius-md)}
.factory-marquee:hover .factory-marquee-track,.factory-marquee:focus-within .factory-marquee-track{animation-play-state:paused}
@keyframes factory-scroll{to{transform:translateX(-50%)}}

/* ── 首页精选产品：自动循环滚动版式（2026-10-21）────────────────────
   复用 .factory-marquee 的滚动/暂停/降级逻辑，这里只定卡片宽度与等高。
   卡片约 300px（网格里同宽），键盘 Tab 进卡片时也暂停（focus-within）。 */
.product-marquee .product-marquee-slide{margin:0;margin-right:24px;flex-shrink:0;width:clamp(280px,22vw,360px)}
.product-marquee .product-card{height:100%}
/* 产品卡片比工厂图高，同样倍数下显得滚得快：单独放慢到每张 9s */
.product-marquee .factory-marquee-track{animation-duration:calc(var(--marquee-items,6) * 9s)}
/* 减弱动态效果：不自动滚，退化为可手动横向滑动的普通图列 */
@media(prefers-reduced-motion:reduce){
  .factory-marquee-track{animation:none}
  .factory-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* ── 导航语言切换器（2026-10-22；10 种语言起改下拉）────────────────
   德语试点时只有 EN/DE，两颗胶囊横排就够；现在 10 种语言横排会把导航
   挤爆，改成 <details> 折叠：收起时只占一颗胶囊（地球图标 + 当前语言码），
   展开是右对齐的面板。用 <details> 而不是 JS 菜单的理由见模板注释。
   配色用主题橙色（--accent 系列，随 data-theme 自动换）：
   · 收起态：橙描边 + 深橙字（--accent-text，10px 小字要 4.5:1，
     直接上 --accent 在浅底只有 3.44:1 不够）；
   · hover / 展开：与面板里的「当前语言」行同款 —— 实心 --accent + 
     --accent-contrast 字，两处视觉语言保持一致（不用 --accent-dark：
     那层是悬停加深色，#a84403 填满小胶囊会发暗）；
   · 面板当前语言行：实心 --accent。
   不用 --green：它虽然也指向 --accent，但语义上是导航文字/链接色，
   改动时容易被其它主题块单独覆写。 */
.lang-switch{position:relative;align-self:center;margin-left:2px}
.lang-switch>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--accent-text);border:1px solid var(--accent);border-radius:var(--radius-pill);padding:7px 10px;transition:color .2s,border-color .2s,background .2s}
.lang-switch>summary::-webkit-details-marker{display:none}
.lang-switch>summary::marker{content:''}
.lang-switch>summary:hover,.lang-switch[open]>summary{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}
.lang-switch>summary svg{width:13px;height:13px;flex-shrink:0}
.lang-caret{font-size:12px;line-height:1;transition:transform .2s}
.lang-switch[open] .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 9px);right:0;z-index:60;min-width:198px;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
.lang-link{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 10px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.lang-link:hover{background:var(--accent-tint);color:var(--accent-text)}
.lang-link.is-active{background:var(--accent);color:var(--accent-contrast)}
.lang-link.is-active .lang-tag{opacity:.7}
.lang-tag{font-size:9px;letter-spacing:.08em;opacity:.45}
@media(max-width:1100px){.lang-switch{margin-left:0}}
/* ≤860px 导航已经是抽屉，面板不再浮层，退化成缩进列表 —— 避免小屏上
   绝对定位的面板超出可视宽度，也避免和抽屉的滚动打架。 */
@media(max-width:860px){
  .lang-switch{width:100%}
  .lang-switch>summary{width:100%;border:0;border-radius:0;padding:12px 6px;justify-content:flex-start}
  .lang-menu{position:static;min-width:0;box-shadow:none;border:0;background:var(--surface-3);border-radius:var(--radius-md);margin-bottom:5px}
}

/* ── 非英语导航防溢出（2026-10-22，10 种语言上线后）────────────────
   机翻的导航词普遍比英文长很多（俄语「ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ」
   一项就 250px+），品牌副标题也是译文（俄语那行约 360px）。
   结果在 1200~1900px 的桌面宽度上，导航把搜索框和语言切换器
   一路顶到容器外，页面出现横向滚动。

   英文文案没变，所以压缩规则只作用于 html:not([lang="en"])：
   · 隐藏品牌副标题（译文长且纯装饰，主品牌名保留）；
   · 收窄导航字号/间距，搜索框改为随视口流式，不再固定 218px；
   · 1240px 以下提前切汉堡抽屉 —— 导航项塞不进 1200px 的容器。
   英文站仍走原来的尺寸，一个像素都不变。 */
@media(min-width:861px){
  html:not([lang="en"]) .brand-copy small{display:none}
  html:not([lang="en"]) .nav-wrap{gap:20px}
  html:not([lang="en"]) .main-nav{gap:12px}
  html:not([lang="en"]) .nav-link{font-size:11px;letter-spacing:.04em}
  html:not([lang="en"]) .nav-search input,
  html:not([lang="en"]) .nav-search input:focus{width:clamp(120px,10vw,170px)}
}

/* 861~1240px：非英语提前用汉堡抽屉。规则与 ≤860 的移动端一致，
   只是抽屉顶在 86px 的桌面页头下方（≤860 的 top:74px 不受影响）。 */
@media(min-width:861px) and (max-width:1240px){
  html:not([lang="en"]) .mobile-menu-toggle{display:block;margin-left:auto;order:3}
  html:not([lang="en"]) .nav-search{order:2}
  html:not([lang="en"]) .main-nav{display:none;position:absolute;top:86px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 18px 19px;box-shadow:0 20px 30px var(--shadow-md)}
  html:not([lang="en"]) .main-nav.is-open{display:flex}
  html:not([lang="en"]) .nav-link{display:block;padding:12px 6px;font-size:13px;letter-spacing:.06em}
  html:not([lang="en"]) .nav-dropdown{display:block;height:auto}
  html:not([lang="en"]) .nav-dropdown>a{display:block}
  html:not([lang="en"]) .dropdown-menu{position:static;display:block;width:100%;box-shadow:none;border:0;background:var(--surface-3);border-radius:var(--radius-md);margin-bottom:5px;padding:5px}
  html:not([lang="en"]) .dropdown-menu a{padding:9px 12px}
  html:not([lang="en"]) .lang-switch{width:100%;margin-left:0}
  html:not([lang="en"]) .lang-switch>summary{width:100%;border:0;border-radius:0;padding:12px 6px;justify-content:flex-start}
  html:not([lang="en"]) .lang-menu{position:static;min-width:0;box-shadow:none;border:0;background:var(--surface-3);border-radius:var(--radius-md);margin-bottom:5px}
}