/* ============================================================
   设计令牌（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);

  /* ── 版面宽度 ── */
  --container:1200px;

  /* ── 默认主题：象牙编辑风 ── */
  --ink:#17140f;          /* 标题、强调文字 */
  --ink-soft:#3b352e;     /* 正文 */
  --muted:#6d6559;        /* 次要说明 */
  --faint:#9a9184;        /* 极弱提示、序号 */
  --ghost:#c2baad;        /* 分隔符、占位 */
  --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; /* 深底上的次要文字 */

  /* ── 半透明层 ── */
  --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);
  --mint:var(--accent-tint);
  --radius:var(--radius-md);
  --shadow:var(--shadow-md);
}

/* 主题二：墨绿传承风 —— 保留原有品牌绿，但去掉糖果黄橘与柔光 */
html[data-theme="heritage"]{
  --ink:#16241c;
  --ink-soft:#33443a;
  --muted:#63756a;
  --faint:#8e9c92;
  --ghost:#bcc7bd;
  --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);
}

/* 主题三：冷调商务风 —— 冷白 + 石墨灰，理性克制，偏国际大厂调性 */
html[data-theme="slate"]{
  --ink:#14181d;
  --ink-soft:#333a42;
  --muted:#666e78;
  --faint:#949ba4;
  --ghost:#c1c6cc;
  --line:#e0e3e7;
  --line-soft:#eceef0;
  --line-strong:#c8cdd3;

  --paper:#f8f9fa;
  --surface:#ffffff;
  --surface-2:#eef0f2;
  --surface-3:#e5e8eb;

  --accent:#1e2a38;
  --accent-2:#33445a;
  --accent-dark:#131c26;
  --accent-tint:#e8ecf0;
  --accent-quiet:#5c7186;
  --accent-contrast:#f8f9fa;
  --accent-text:#33445a;

  --gold:#8c8f94;
  --gold-ink:#6b6f75;
  --gold-tint:#eef0f2;

  --dark:#14181d;
  --on-dark:#f3f5f7;
  --on-dark-soft:#a9b1ba;

  --header-bg:rgba(248,249,250,.90);
  --tag-bg:rgba(255,255,255,.94);
  --glass:rgba(255,255,255,.75);
  --gold-veil:rgba(30,42,56,.10);
  --focus-ring:rgba(30,42,56,.16);
}

/* 主题四：静海蓝 × 霓虹粉
   ────────────────────────────────────────────────────────────
   三个颜色各司其职，不要混用：
     静海蓝 #082A47 → 骨架。标题、正文、深色区块、按钮上的文字。
     霓虹粉 #FE5EA0 → 强调。按钮底色、点缀细线、图标、编号。
     霞光粉 #FAE4EB → 空气。交替区块底色、图片衬底、浅填充。
   注意霓虹粉够亮但不够深：它当「底色」用很好看，
   当「小字颜色」放在白底上对比度只有 2.9:1，读不清。
   小字号强调文字统一走 --accent-text（深玫红，对比度 4.5:1 达标）。 */
html[data-theme="ocean-pink"]{
  --ink:#082a47;
  --ink-soft:#27415c;
  --muted:#5b7386;
  --faint:#7d94a4;
  --ghost:#bccad5;
  --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:#2c4a42;
  --muted:#5b736c;
  --faint:#84968f;
  --ghost:#bdd1c9;
  --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);
}

/* 主题六：暖阳薰衣草
   ────────────────────────────────────────────────────────────
   骨架由五个颜色构成，分工照搬静海蓝 / 翠绿那两套的逻辑：

     花白色     #fffaf0 → 纸。页面底色。
     香蕉狂热   #fae7b5 → 面。交替区块底 + 内页首屏 + 页脚。
     安全黄     #eed202 → 点。装饰线、序号、图标环（只做图形，不做小字）。
     淡紫色     #e0b0ff → 底。强调浅底：FAQ 提示条、产品角标、图标方块。
     浓郁薰衣草 #a76bcf → 主。按钮底色、强调线、当前导航项。

   ⚠ 这套配色有三个必须知道的对比度事实。下面每个文字令牌的取值都是按
   「自己最暗的那个承载底」反解出来的（脚本 .workbuddy/tools/solve_lilac_theme.py），
   不要凭手感改：

   1. 香蕉狂热 #fae7b5 比象牙纸暗（相对亮度 0.808 vs 0.959），而它要当区块
      底色 —— 正文真正的承载底是它，不是白纸。所以 --muted / --faint 是按
      「香蕉底」解的，落到花白纸上对比度只会更高，不会更差。

   2. 淡紫 #e0b0ff 是五色里最暗的一个（0.541），偏偏它要当本套的 --accent-tint。
      突出色若照象牙风取「中等紫」，压上去只有 4:1 出头，所以 --accent-2 与
      --accent-text 是按「淡紫底」解出来的深紫（#682d8e），放到白底上会显得
      很浓 —— 这是有意的，别往回调亮。

   3. 浓郁薰衣草 #a76bcf 白底只有 3.72:1，放不了小字（和霓虹粉 #FE5EA0、
      翠绿 #0DB083 是同一类问题）。它只做「底色 + 深字」：--accent-contrast
      取近黑，也只有 5.20:1 —— 已经贴着纯黑上限（5.65:1）了。
      小字强调统一走 --accent-text。

   还有一处和前面几套方向相反：--accent-dark 是「变亮」而不是变深。
   按钮 hover 只换底色、不换字色，这一套的字色是近黑，底色一变深对比度就掉到
   3.7:1。所以 hover 往亮里走（翠绿那套同理，亮底主题都这样）。 */
html[data-theme="sunshine-lilac"]{
  --ink:#130c17;
  --ink-soft:#2e1f37;
  --muted:#554364;
  --faint:#725f83;
  --ghost:#a599b2;
  --line:#e7e0eb;
  --line-soft:#f3f1f5;
  --line-strong:#d4c8da;

  --paper:#fffaf0;
  --surface:#ffffff;
  --surface-2:#fae7b5;
  --surface-3:#f7e2a8;

  --accent:#a76bcf;
  --accent-2:#682d8e;
  --accent-dark:#b880da;
  --accent-tint:#e0b0ff;
  --accent-quiet:#9a61be;
  --accent-contrast:#120b17;
  --accent-text:#682d8e;

  --gold:#eed202;
  --gold-ink:#795a03;
  --gold-tint:#fdf6d6;

  --dark:#2a1433;
  --on-dark:#efe8f2;
  --on-dark-soft:#a992b6;

  --header-bg:rgba(255,250,240,.90);
  --tag-bg:rgba(255,255,255,.94);
  --glass:rgba(255,255,255,.74);
  --gold-veil:rgba(238,210,2,.16);
  --focus-ring:rgba(167,107,207,.30);
}

*{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% - 56px));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:left}.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-header p{font-size:14px;color:var(--muted);line-height:1.8}.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% - 36px))}.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-header p{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(--mint);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(--mint);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}
.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}

/* ── 区块节奏：留白加大，是「大气」最直接的来源 ────────── */
.section-padding{padding:112px 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}
.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);
  padding: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-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}
  .hero-copy h1{font-size:clamp(33px,6.4vw,46px)}
  .interior-hero h1{font-size:clamp(32px,6vw,44px)}
  .section-padding{padding:80px 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:62px 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}
}

/* ============================================================
   静海蓝 × 霓虹粉 专属装饰
   ────────────────────────────────────────────────────────────
   这套配色饱和度高、明度跨度大，光换令牌会显得"只是换了颜色"。
   这里补几处只在 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)}

/* ════════════════════════════════════════════════════════════════
   主题六：暖阳薰衣草 —— 专属装饰（只在 sunshine-lilac 下生效）
   ────────────────────────────────────────────────────────────
   骨架：花白纸 #fffaf0 打底，香蕉狂热 #fae7b5 做区块底与页脚，
   淡紫 #e0b0ff 做强调浅底，主色是浓郁薰衣草 #a76bcf，点缀安全黄 #eed202。
   颜色关系令牌层已经定完了，这里只补三处令牌管不到的地方：

   1) 只有首页那个「无幻灯片时」的兜底首屏还吃 --paper。全站首屏
      （.hero-carousel / .interior-hero）默认都走 --surface-2，这个
      兜底也跟着走，免得有条路径孤零零露出一片花白。

   2) 页脚那个 .brand 链接。页头品牌名 / 副标已经被全局对比度修复
      接到 --ink / --muted 了，只有 .brand 自身还吃 --green
      （= 浓郁薰衣草），香蕉页脚上只有 3.04:1。

   3) 一批「用小字写强调色」的漏网点：正文里的小链接、产品角标、
      页脚邮箱、以及淡紫底上的图标方块。全局对比度修复那一节收了一批，
      剩下的这几条在浓郁薰衣草下只有 3.72:1（花白底）/ 3.04:1（香蕉底），
      都够不上小字的 4.5:1。统一改走 --accent-text。

   为什么不把第 3 条并进「全局对比度修复」那一节：那一节对所有主题生效，
   动它会连带改掉现有五套主题的观感。这一套自己承担自己的覆盖。
   ════════════════════════════════════════════════════════════════ */

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

html[data-theme="sunshine-lilac"] .text-link,
html[data-theme="sunshine-lilac"] .product-badge,
html[data-theme="sunshine-lilac"] .product-inquiry,
html[data-theme="sunshine-lilac"] .blog-read,
html[data-theme="sunshine-lilac"] .factory-image-label,
html[data-theme="sunshine-lilac"] .footer-email{color:var(--accent-text)}

/* 淡紫底（--accent-tint）上的图标方块：--green 压上去只有 2.1:1 */
html[data-theme="sunshine-lilac"] .icon-green,
html[data-theme="sunshine-lilac"] .final-cta-icon,
html[data-theme="sunshine-lilac"] .process-icon,
html[data-theme="sunshine-lilac"] .detail-icon{color:var(--accent-text)}

/* ════════════════════════════════════════════════════════════════
   对比度修复（全局，作用于所有主题）—— 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：

        令牌         改前对比度   改后对比度   用途
        --ink-soft   9.4 ~ 11.4   ≈ 12        正文
        --muted      4.7 ~ 5.4    ≈ 6.8       段落、卡片描述、FAQ 答案
        --faint      2.7 ~ 3.1    ≈ 4.65      小字标签、面包屑、表单提示

      改前 --muted 刚过 4.5 的线、--faint 只有 2.7~3.1，
      13~15px 的段落和小号大写标签确实发灰。
      这两个令牌基本只用于文字（另有 2 处装饰：.hero-dot:hover 的底色、
      .detail-thumb:hover 的描边，压深无害）。
      页脚的 --on-dark / --on-dark-soft 本来就有 7~8: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}

:root{--ink-soft:#312c27;--muted:#585148;--faint:#726a5d}
html[data-theme="heritage"]{--ink-soft:#26322b;--muted:#4a574f;--faint:#637067}
html[data-theme="slate"]{--ink-soft:#282e34;--muted:#4d535a;--faint:#646c76}
html[data-theme="ocean-pink"]{--ink-soft:#192a3c;--muted:#40505e;--faint:#556a79}
html[data-theme="emerald"]{--ink-soft:#1f332e;--muted:#465853;--faint:#60716a}
/* 暖阳薰衣草：令牌块里给的就是最终值（反解自「最差背景」），
   这里列一行只是让这份「每套主题都压深过」的清单保持完整，
   免得下次加主题时看漏。 */
html[data-theme="sunshine-lilac"]{--ink-soft:#2e1f37;--muted:#554364;--faint:#725f83}

.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}

/* ════════════════════════════════════════════════════════════════
   主题六：暖阳薰衣草 —— 深底页脚 + 浅底结尾 CTA（页头保持原样）
   ────────────────────────────────────────────────────────────
   需求原文：「页首和页脚颜色都统一用#2A1433 这个吧，然后页脚上面这个
   Have a product idea in mind? 模块的背景色用#FAE7B5」；随后补一句
   「搞错了，导航栏那个模块还是保留以前那种」——所以最终落地的是：
     页脚 → #2A1433   结尾 CTA → #FAE7B5   页头 → 不动，继续浅色

   连带影响不小：这两处的文字色原本都是**按浅底配好的**（--ink /
   --ink-soft / --muted / --faint / --accent-text）。底色一翻，这些文字
   必须整体翻面，否则就是「深底写深字」。所以下面不是两行，而是两组。

   翻面后各令牌在两种新底色上的实测对比度：

     令牌              #2a1433 深底   #fae7b5 香蕉底
     --on-dark            14.0:1        13.2:1   ✓ 两种底都稳
     --on-dark-soft        6.0:1         5.6:1   ✓
     --gold（安全黄）      11.1:1         1.2:1   ✗ 香蕉底上绝不能当文字
     --gold-ink            6.2:1         4.7:1   ✓ 香蕉底上压线过 AA
     --accent-text         4.5:1         6.6:1   ✓

   注意最后一行反过来的那一处：结尾 CTA 从深底翻回香蕉底后，斜体强调
   要从 --gold（安全黄）换成 --gold-ink（深琥珀），因为安全黄压在
   香蕉底上只有 1.2:1，等于没有。同理 `.final-cta .eyebrow-line` 那条
   装饰线也从 --gold 换成 --gold-ink。 */

/* ── 页头：保持原来的浅色，不动 ──
   一度把页头也刷成 #2a1433（连品牌名、导航、汉堡键一起翻成浅色），
   试过之后决定退回浅底：导航是全站信息密度最高的地方，深底 + 浅字虽然
   对比度更好，但和下面那张大图撞在一起显得闷，而且顶部公告条本来就是
   深色，再加一条深色页头会变成「上深下浅」的断带。
   所以这里刻意什么都不写 —— 页头继续吃 --header-bg（花白半透明）
   和 --ink / --ink-soft 这套浅底配色。 */

/* ── 页脚：深底 ──
   这一段和 ocean-pink / emerald 的页脚覆盖几乎逐条对应，但有两处它们
   没写而这里必须写：
   ① .muted-label —— 它在页脚订阅区（深底）和产品列表筛选栏（浅底）
      各出现一次，不能整条改，只能限定在 .footer-newsletter 里。
   ② .footer-bottom —— 原规则里写的是 `border-top:1px solid var(--line)`
      这个**简写**，它自带 color:var(--faint)。只覆盖 border-top-color
      会被这条简写里的 color 盖掉，实测页脚版权行掉到 2.95:1，
      所以这里要把 color 和 border-top 一起重写。 */
html[data-theme="sunshine-lilac"] .site-footer{background:var(--dark);color:var(--on-dark)}
html[data-theme="sunshine-lilac"] .footer-brand-col>p,
html[data-theme="sunshine-lilac"] .footer-col a,
html[data-theme="sunshine-lilac"] .footer-bottom a,
html[data-theme="sunshine-lilac"] .social-dots a,
html[data-theme="sunshine-lilac"] .footer-email{color:var(--on-dark-soft)}
html[data-theme="sunshine-lilac"] .footer-col h2,
html[data-theme="sunshine-lilac"] .footer-newsletter .muted-label{color:var(--on-dark-soft)}
html[data-theme="sunshine-lilac"] .footer-newsletter h3,
html[data-theme="sunshine-lilac"] .brand-footer .brand-copy strong{color:var(--on-dark)}
html[data-theme="sunshine-lilac"] .brand-footer .brand-copy small{color:var(--on-dark-soft)}
html[data-theme="sunshine-lilac"] .footer-col a:hover,
html[data-theme="sunshine-lilac"] .footer-bottom a:hover{color:var(--gold)}
html[data-theme="sunshine-lilac"] .footer-email{border-bottom-color:rgba(255,255,255,.28)}
/* border-top 必须连 color 一起重写：原规则是 `border-top:1px solid var(--line)`
   这个简写，自带 color:var(--faint)。只覆盖 border-top-color 的话，
   版权行会停在 --faint 上（深底 2.95:1，审计实测到的就是这个）。 */
html[data-theme="sunshine-lilac"] .footer-bottom{border-top:1px solid rgba(255,255,255,.14);color:var(--on-dark-soft)}
html[data-theme="sunshine-lilac"] .social-dots a{border-color:rgba(255,255,255,.28)}

/* ── 结尾 CTA：香蕉底 ──
   正文与标题落回浅底那一套；斜体强调和眉题短线从 --gold 换成 --gold-ink。 */
html[data-theme="sunshine-lilac"] .final-cta-section{background:var(--surface-2);color:var(--ink)}
html[data-theme="sunshine-lilac"] .final-cta h2{color:var(--ink)}
/* 原来的 `.final-cta h2 em` 用 --gold，安全黄压在香蕉底上只有 1.2:1 */
html[data-theme="sunshine-lilac"] .final-cta h2 em{color:var(--gold-ink)}
html[data-theme="sunshine-lilac"] .final-cta .eyebrow-line{background:var(--gold-ink)}
html[data-theme="sunshine-lilac"] .final-cta p,
html[data-theme="sunshine-lilac"] .final-cta .eyebrow{color:var(--muted)}
html[data-theme="sunshine-lilac"] .final-cta>.button{border-color:var(--ink);color:var(--ink)}
html[data-theme="sunshine-lilac"] .final-cta>.button:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)}
/* ══════════════════════════════════════════════════════════════
   产品详情图册：左侧缩略图竖列 + 右侧大图
   ──────────────────────────────────────────────────────────────
   电商买家的习惯是「左栏选图、右栏看大图」，视线不用来回跳，
   也不用往下滚才能看到其它角度。窄屏会自动退回「大图在上、
   缩略图在下」的竖排（见文件末尾的媒体查询）。

   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{width:15px;height:15px}
/* Instagram 那个是圆角方框，本身就接近正方形满格，不需要放大 */

/* ── 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}

/* ── 站内搜索（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)}

/* 字段级错误。全站此前没有这条规则，/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}
}