/* ==========================================================================
   川脂美官网 · 改版设计系统
   原则：一套栅格、一套字阶、一套色板。9 个页面零漂移。
   ========================================================================== */

:root{
  /* 色板：墨 / 米 / 金 / 菜籽绿 */
  --ink:#1A1714;
  --ink-2:#3D362C;
  --ink-3:#6E6455;
  --ink-4:#9A8F7D;
  --paper:#FBF8F1;
  --paper-2:#F5F0E4;
  --paper-3:#EDE5D3;
  --line:#E0D6C3;
  --line-2:#CFC2A8;

  /* 金色：文字用深金 4.7:1，装饰用亮金 */
  --gold:#8C6A2F;
  --gold-l:#B99048;
  --gold-pale:#EFE4CB;

  /* 功能色 */
  --green:#4A5A32;

  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",-apple-system,system-ui,sans-serif;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",SimSun,Georgia,serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;

  --wrap:1200px;
  --gutter:24px;
  --r:2px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.8;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:0;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
sup{font-size:.62em;line-height:0;vertical-align:super}

/* ---------- 布局 ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:96px 0}
.sec--tight{padding:64px 0}
.sec--paper{background:var(--paper-2)}
.sec--ink{background:var(--ink);color:#EFE8DA}
@media(max-width:900px){.sec{padding:64px 0}.sec--tight{padding:48px 0}}

/* ---------- 字阶 ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:700;
  line-height:1.28;
  color:var(--ink);
  letter-spacing:0;
  text-wrap:balance;
  word-break:normal;
  line-break:strict;
}
h1{font-size:clamp(30px,3.5vw,50px)}
h2{font-size:clamp(24px,2.6vw,34px)}
h3{font-size:clamp(18px,1.7vw,21px)}
h4{font-size:17px}
p{text-wrap:pretty}

.lead{
  font-family:var(--serif);
  font-size:clamp(16px,1.25vw,18px);
  line-height:1.95;
  color:var(--ink-2);
}
.body p + p{margin-top:14px}
.body p{font-family:var(--serif);font-size:16.5px;line-height:1.95;color:var(--ink-2)}

/* 小标签：带短横线，替代无衬线小字 */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:.18em;
  color:var(--gold);text-transform:uppercase;
  margin-bottom:18px;
}
.kicker::before{content:"";width:24px;height:1px;background:var(--gold-l)}

.sec-head{max-width:720px;margin-bottom:44px}
.sec-head p{margin-top:14px;color:var(--ink-3);font-size:15.5px;line-height:1.85}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head--center .kicker{justify-content:center}
.sec-head--center p{margin-left:auto;margin-right:auto}

/* ---------- 按钮：深墨底，对比度 15:1 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 26px;border-radius:var(--r);
  font-size:15px;font-weight:600;letter-spacing:.02em;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
  white-space:nowrap;
}
.btn--primary{background:var(--ink);color:#FBF8F1;border:1px solid var(--ink)}
.btn--primary:hover{background:#332C24;border-color:#332C24}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(26,23,20,.03)}
.btn--gold{background:var(--gold);color:#fff;border:1px solid var(--gold)}
.btn--gold:hover{background:#7A5B27;border-color:#7A5B27}
.btn--sm{height:42px;padding:0 18px;font-size:14px}
.btn--block{width:100%}
.btn--onink{background:#FBF8F1;color:var(--ink);border:1px solid #FBF8F1}
.btn--onink:hover{background:#EDE5D3;border-color:#EDE5D3}
.btn--onink-ghost{background:transparent;color:#EFE8DA;border:1px solid rgba(239,232,218,.34)}
.btn--onink-ghost:hover{border-color:#EFE8DA;background:rgba(239,232,218,.08)}

.link-arrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14.5px;font-weight:600;color:var(--gold);
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.link-arrow:hover{border-bottom-color:var(--gold)}
.link-arrow::after{content:"→";transition:transform .25s var(--ease)}
.link-arrow:hover::after{transform:translateX(3px)}

/* ---------- 顶部信息条 ---------- */
.topbar{
  background:var(--ink);color:#D9D0BF;
  font-size:12.5px;letter-spacing:.02em;
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:38px;
}
.topbar a{color:#F0E9DA;font-weight:600}
.topbar a:hover{color:#fff}
.topbar .promises{display:flex;gap:22px;align-items:center;color:#AFA491}
.topbar .promises i{color:#8C6A2F;font-style:normal;margin-right:6px}
@media(max-width:860px){.topbar .promises{display:none}.topbar .wrap{justify-content:center}}

/* ---------- 导航 ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(251,248,241,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:height .25s var(--ease);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;height:70px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand svg{width:34px;height:34px;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand-txt b{
  font-family:var(--serif);font-size:19px;font-weight:700;
  color:var(--ink);letter-spacing:.06em;
}
.brand-txt span{
  font-size:9.5px;letter-spacing:.22em;color:var(--ink-4);
  font-weight:600;margin-top:3px;
}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{
  padding:0 14px;height:70px;display:inline-flex;align-items:center;
  font-size:14.5px;color:var(--ink-2);position:relative;
}
.nav-links a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:22px;height:1.5px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-links a[aria-current]{color:var(--ink);font-weight:600}
.nav-cta{display:flex;align-items:center;gap:10px;flex:none}
.nav-tel{
  display:flex;flex-direction:column;line-height:1.2;text-align:right;
  padding-right:6px;
}
.nav-tel span{font-size:10.5px;color:var(--ink-4);letter-spacing:.1em}
.nav-tel b{font-family:var(--serif);font-size:17px;color:var(--ink);letter-spacing:.01em}
.nav-toggle{
  display:none;width:42px;height:42px;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:var(--r);
}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink);
}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}

@media(max-width:1040px){
  .nav-links,.nav-tel{display:none}
  .nav-toggle{display:flex}
}
.drawer{
  display:none;position:fixed;inset:0;z-index:70;background:rgba(26,23,20,.42);
}
.drawer[data-open="true"]{display:block}
.drawer-panel{
  position:absolute;right:0;top:0;bottom:0;width:min(84vw,340px);
  background:var(--paper);padding:26px 24px;display:flex;flex-direction:column;
  box-shadow:-20px 0 60px rgba(26,23,20,.18);
  overflow-y:auto;
}
.drawer-panel a{
  padding:15px 0;border-bottom:1px solid var(--line);
  font-size:16px;font-family:var(--serif);color:var(--ink);
}
.drawer-close{align-self:flex-end;font-size:22px;line-height:1;padding:6px 10px;color:var(--ink-3)}
.drawer-foot{margin-top:auto;padding-top:22px}
.drawer-foot .btn{margin-top:10px}

/* ---------- 首屏 ---------- */
.hero{background:var(--paper);border-bottom:1px solid var(--line);overflow:hidden}
.hero .wrap{
  display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center;
  padding-top:72px;padding-bottom:72px;
}
.hero-loc{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.14em;color:var(--gold);font-weight:700;
  border:1px solid var(--gold-pale);background:#fff;
  padding:6px 12px;border-radius:100px;margin-bottom:22px;
}
.hero h1{margin-bottom:20px}
.hero h1 em{
  font-style:normal;color:var(--gold);
  background:linear-gradient(transparent 68%,var(--gold-pale) 68%);
}
.hero-sub{font-family:var(--serif);font-size:17px;line-height:1.95;color:var(--ink-2);max-width:30em}
.hero-proof{
  display:flex;gap:0;margin:32px 0 30px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.hero-proof div{
  flex:1;padding:16px 0 16px 18px;border-left:1px solid var(--line);
}
.hero-proof div:first-child{border-left:0;padding-left:0}
.hero-proof b{
  display:block;font-family:var(--serif);font-size:clamp(21px,2vw,26px);
  color:var(--ink);line-height:1.2;letter-spacing:.01em;
}
.hero-proof span{display:block;font-size:12px;color:var(--ink-3);margin-top:4px;letter-spacing:.04em}
.hero-act{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-act .note{font-size:12.5px;color:var(--ink-3);margin-left:4px}

.hero-visual{position:relative}
.hero-frame{
  position:relative;background:var(--paper-2);border:1px solid var(--line);
  padding:10px;
}
.hero-frame img{
  width:100%;aspect-ratio:4/3.05;object-fit:cover;object-position:50% 18%;
  filter:saturate(.86) contrast(1.02);
}
.hero-tag{
  position:absolute;left:-14px;bottom:34px;background:var(--ink);color:#F5EFE2;
  padding:14px 18px;max-width:250px;
  box-shadow:0 16px 40px rgba(26,23,20,.16);
}
.hero-tag b{display:block;font-family:var(--serif);font-size:16px;margin-bottom:3px}
.hero-tag span{font-size:11.5px;color:#B7AC97;letter-spacing:.04em}
@media(max-width:940px){
  .hero .wrap{grid-template-columns:1fr;gap:36px;padding-top:44px;padding-bottom:52px}
  .hero-visual{order:-1}
  .hero-frame img{aspect-ratio:16/10;object-position:50% 22%}
  .hero-tag{left:auto;right:10px;bottom:10px;padding:10px 14px;max-width:none}
  .hero-tag b{font-size:14px}
  .hero-proof b{font-size:20px}
}

/* ---------- 4 项栅格：全站唯一规格 ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

.feature{
  background:#fff;border:1px solid var(--line);padding:28px 24px;
  display:flex;flex-direction:column;
  transition:border-color .25s,transform .25s var(--ease);
}
.feature:hover{border-color:var(--line-2);transform:translateY(-2px)}
.feature .idx{
  font-family:var(--serif);font-size:12px;color:var(--gold-l);
  letter-spacing:.16em;font-weight:700;margin-bottom:16px;
}
.feature h4{margin-bottom:8px;line-height:1.5}
.feature p{font-size:14px;line-height:1.75;color:var(--ink-3)}
.feature .big{
  font-family:var(--serif);font-size:30px;color:var(--ink);
  line-height:1.1;margin-bottom:6px;
}

/* ---------- 产品卡 ---------- */
.sku{
  background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .25s,box-shadow .25s,transform .25s var(--ease);
}
.sku:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 16px 40px rgba(26,23,20,.07)}
.sku-img{
  background:linear-gradient(180deg,#F7F2E6 0%,#F1EAD9 100%);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  padding:18px;border-bottom:1px solid var(--line);
  overflow:hidden;
}
.sku-img img{
  height:100%;width:auto;max-width:100%;object-fit:contain;
  filter:saturate(.95) contrast(1.02);
  transition:transform .4s var(--ease);
}
.sku:hover .sku-img img{transform:scale(1.03)}
.sku-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.sku-series{
  font-size:11px;letter-spacing:.14em;color:var(--gold);font-weight:700;
  margin-bottom:7px;
}
.sku-name{
  font-family:var(--serif);font-size:16.5px;font-weight:700;color:var(--ink);
  line-height:1.45;margin-bottom:10px;
}
.sku-spec{
  font-size:12.5px;color:var(--ink-3);line-height:1.7;
  padding-top:10px;border-top:1px dotted var(--line-2);margin-top:auto;
}
.sku-spec i{font-style:normal;color:var(--ink-4)}
.sku-spec b{color:var(--ink-2);font-weight:600}
.sku-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;
}
.sku-foot .price{
  font-family:var(--serif);font-size:14px;color:var(--ink);
}
.sku-foot .price small{font-size:11px;color:var(--ink-4);display:block;line-height:1.2}

/* 筛选 */
.filters{
  display:flex;flex-wrap:wrap;gap:28px;align-items:center;
  padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:32px;
}
.filter-set{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filter-set > span{
  font-size:11.5px;letter-spacing:.14em;color:var(--ink-4);font-weight:700;margin-right:4px;
}
.chip{
  height:32px;padding:0 14px;border:1px solid var(--line-2);border-radius:100px;
  font-size:13px;color:var(--ink-2);line-height:30px;
  transition:.2s;
}
.chip:hover{border-color:var(--ink-3)}
.chip[aria-pressed="true"]{
  background:var(--ink);color:#FBF8F1;border-color:var(--ink);font-weight:600;
}
.result-line{font-size:13px;color:var(--ink-3)}
.result-line b{color:var(--ink);font-weight:600}

/* ---------- 规格表 ---------- */
.spec-table{width:100%;border-collapse:collapse;font-size:14.5px}
.spec-table th,.spec-table td{
  padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;
}
.spec-table th{
  width:130px;font-weight:600;color:var(--ink-3);background:var(--paper-2);
  font-size:13px;letter-spacing:.04em;white-space:nowrap;
}
.spec-table td{color:var(--ink);font-family:var(--serif);font-size:15px}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.todo{color:var(--gold);border-bottom:1px dotted var(--gold-l);cursor:help}

/* ---------- 证据卡 ---------- */
.proof-card{
  background:#fff;border:1px solid var(--line);padding:24px;
  display:flex;gap:16px;align-items:flex-start;
}
.proof-card .ic{
  flex:none;width:40px;height:40px;border:1px solid var(--gold-pale);
  display:flex;align-items:center;justify-content:center;background:var(--paper-2);
}
.proof-card .ic svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.5}
.proof-card h4{font-size:15.5px;margin-bottom:5px}
.proof-card p{font-size:13px;color:var(--ink-3);line-height:1.7}
.proof-card .st{
  display:inline-block;margin-top:9px;font-size:11.5px;letter-spacing:.06em;
  padding:2px 8px;border:1px solid var(--line-2);color:var(--ink-3);
}
.proof-card .st.ok{border-color:#B9C6A8;color:var(--green);background:#F1F4EA}

/* ---------- 散油深色带 ---------- */
.band-ink{background:var(--ink);color:#DCD3C2;padding:88px 0}
.band-ink h2{color:#F7F1E4}
.band-ink .kicker{color:var(--gold-l)}
.band-ink .kicker::before{background:var(--gold-l)}
.band-ink .sec-head p{color:#A79C88}
.band-ink .feature{background:rgba(255,255,255,.04);border-color:rgba(239,232,218,.16)}
.band-ink .feature h4{color:#F2ECDE}
.band-ink .feature p{color:#A79C88}
.band-ink .feature .idx{color:var(--gold-l)}

/* ---------- 厂区图 ---------- */
.shot{position:relative;overflow:hidden;background:var(--paper-3);border:1px solid var(--line)}
.shot img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:saturate(.62) contrast(1.04) brightness(1.02) sepia(.06);
  transition:filter .4s var(--ease);
}
.shot:hover img{filter:saturate(.88) contrast(1.03) sepia(0)}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px;
  font-size:12px;color:#F5EFE2;letter-spacing:.04em;
  background:linear-gradient(transparent,rgba(26,23,20,.72));
}
.shot--wide{grid-column:span 2}
@media(max-width:620px){.shot--wide{grid-column:span 1}}

/* ---------- 数据条 ---------- */
.stat-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stat{
  padding:28px 24px;border-left:1px solid var(--line);
}
.stat:first-child{border-left:0;padding-left:0}
.stat b{
  font-family:var(--serif);font-size:clamp(28px,3vw,38px);color:var(--ink);
  line-height:1;display:block;letter-spacing:.01em;
}
.stat b small{font-size:.5em;color:var(--ink-3);margin-left:2px}
.stat span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:10px;letter-spacing:.03em}
@media(max-width:760px){
  .stat-row{grid-template-columns:1fr 1fr}
  .stat{padding:22px 18px;border-left:1px solid var(--line)}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line)}
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:17px;font-weight:700;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq .ans{padding:0 0 22px;max-width:70ch}
.faq .ans p{font-size:15px;line-height:1.85;color:var(--ink-3);font-family:var(--sans)}

/* ---------- CTA 块 ---------- */
.cta-block{
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
  border:1px solid var(--line);background:#fff;padding:52px;
}
.cta-block h2{margin-bottom:14px}
.cta-block p{color:var(--ink-3);font-size:15px;line-height:1.85}
.cta-acts{display:flex;flex-direction:column;gap:12px}
.cta-acts .row{display:flex;gap:12px}
@media(max-width:880px){
  .cta-block{grid-template-columns:1fr;gap:30px;padding:32px 24px}
  .cta-acts .row{flex-wrap:wrap}
}
@media(max-width:480px){.hero-act .btn{width:100%}.cta-acts .row .btn{width:100%}}

/* ---------- 页脚 ---------- */
.foot{background:var(--ink);color:#A79C88;padding:68px 0 0;font-size:13.5px}
.foot-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;
  padding-bottom:48px;border-bottom:1px solid rgba(239,232,218,.14);
}
.foot h5{
  font-family:var(--serif);font-size:14px;color:#F2ECDE;font-weight:700;
  margin-bottom:16px;letter-spacing:.06em;
}
.foot a:hover{color:#F2ECDE}
.foot li{margin-bottom:9px;line-height:1.7}
.foot .brand-txt b{color:#F7F1E4}
.foot .brand-txt span{color:#7E7462}
.foot .desc{margin-top:16px;line-height:1.85;max-width:30em;color:#948A76}
.foot .tel-list b{
  display:block;font-family:var(--serif);font-size:19px;color:#F7F1E4;
  letter-spacing:.01em;margin-bottom:2px;
}
.foot .tel-list span{font-size:11.5px;color:#8A8069;letter-spacing:.04em}
.foot .tel-list li{margin-bottom:14px}
.foot-btm{
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  padding:22px 0 30px;font-size:12px;color:#7E7462;
}
.foot-btm a{border-bottom:1px dotted #5E5647}
@media(max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-grid > div:first-child{grid-column:span 2}
}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}.foot-grid > div:first-child{grid-column:span 1}}

/* ---------- 移动端底部操作条：真正的手指可达区 ---------- */
.mobar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:65;
  background:rgba(251,248,241,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  grid-template-columns:repeat(3,1fr);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:58px;font-size:11.5px;color:var(--ink-2);border-left:1px solid var(--line);
}
.mobar a:first-child{border-left:0}
.mobar a svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.6}
.mobar a.primary{background:var(--ink);color:#FBF8F1}
.mobar a.primary svg{stroke:#FBF8F1}
@media(max-width:1040px){
  .mobar{display:grid}
  body{padding-bottom:58px}
}

/* ---------- 面包屑 ---------- */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:12.5px;color:var(--ink-4);margin-bottom:26px;
}
.crumbs a:hover{color:var(--gold)}
.crumbs i{font-style:normal;color:var(--line-2)}

/* ---------- 页面头 ---------- */
.page-head{
  padding:44px 0 40px;border-bottom:1px solid var(--line);
  background:var(--paper-2);
}
.page-head h1{font-size:clamp(26px,3vw,40px)}
.page-head p{margin-top:12px;color:var(--ink-3);font-size:15.5px;max-width:44em}

/* ---------- 产品详情 ---------- */
.pd{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:start;
  padding:44px 0 76px;
}
.pd-gallery{position:sticky;top:96px}
.pd-main{
  background:linear-gradient(180deg,#F7F2E6,#F1EAD9);
  border:1px solid var(--line);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;padding:40px;
}
.pd-main img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.pd-thumbs{display:flex;gap:10px;margin-top:10px}
.pd-thumbs div{
  width:74px;height:74px;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;padding:8px;
}
.pd-thumbs div.active{border-color:var(--gold-l)}
.pd-thumbs img{max-height:100%;width:auto}
.pd-info h1{margin-bottom:12px}
.pd-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tag{
  font-size:11.5px;letter-spacing:.06em;padding:3px 10px;
  border:1px solid var(--line-2);color:var(--ink-3);background:#fff;
}
.pd-price{
  display:flex;align-items:baseline;gap:10px;
  padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:22px;
}
.pd-price b{font-family:var(--serif);font-size:26px;color:var(--ink)}
.pd-price span{font-size:14px;color:var(--ink-3)}
.pd-price small{font-size:12px;color:var(--ink-4);margin-left:auto}
.pd-acts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.pd-points{display:grid;gap:0}
.pd-points li{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 0;font-size:14px;color:var(--ink-2);
}
.pd-points li::before{
  content:"";flex:none;width:5px;height:5px;background:var(--gold-l);
  margin-top:9px;transform:rotate(45deg);
}
@media(max-width:900px){
  .pd{grid-template-columns:1fr;gap:32px;padding:28px 0 56px}
  .pd-gallery{position:static}
  .pd-main{padding:26px}
}

/* ---------- 表格滚动容器 ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:520px}

/* ---------- 工具类 ---------- */
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}
.mt-24{margin-top:24px}.mt-40{margin-top:40px}.mt-56{margin-top:56px}
.center{text-align:center}
.muted{color:var(--ink-3)}
.small{font-size:13px;line-height:1.8}
.legend{
  margin-top:34px;padding:18px 20px;background:var(--paper-2);
  border:1px solid var(--line);font-size:12.5px;line-height:1.8;color:var(--ink-3);
}
.legend b{color:var(--gold);font-weight:700}
.legend p{font-family:var(--sans);font-size:12.5px}

/* 打印 */
@media print{
  .nav,.topbar,.mobar,.drawer,.cta-block{display:none!important}
  body{background:#fff}
  .sec{padding:24px 0}
}

/* 宽幅厂区图：2:1 裁切，去掉地面杂物，只留罐体与天空 */
.shot--pan{margin-left:0;margin-right:0}
.shot--pan img{aspect-ratio:2/1;object-position:50% 0;object-fit:cover}
@media(max-width:620px){.shot--pan img{aspect-ratio:3/2}}

/* 非 20L 规格：规格牌，避免用小图冒充大桶 */
.sku-img--type{flex-direction:column;gap:6px;background:linear-gradient(180deg,#F7F2E6 0%,#EFE7D4 100%)}
.type-mark{display:flex;align-items:baseline;gap:3px;color:var(--ink)}
.type-mark b{font-family:var(--serif);font-size:52px;line-height:1;font-weight:700;letter-spacing:-.01em}
.type-mark span{font-family:var(--serif);font-size:15px;color:var(--ink-3)}
.type-note{font-size:10.5px;letter-spacing:.12em;color:var(--ink-4);margin-top:2px}

/* ---------- 规格分段 + 行式列表（10L / 5L 无实拍图时使用） ---------- */
.size-sec + .size-sec{margin-top:60px}
.size-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.size-head h2{font-size:22px;white-space:nowrap}
.size-head span{font-size:11.5px;color:var(--ink-4);letter-spacing:.12em;white-space:nowrap}
.size-head i{flex:1;height:1px;background:var(--line);margin-bottom:6px}
.sku-rows{border-top:1px solid var(--line)}
.sku-row{
  display:grid;grid-template-columns:66px 1fr 240px 132px;gap:16px;align-items:center;
  padding:16px 6px;border-bottom:1px solid var(--line);
  transition:background .2s var(--ease);
}
.sku-row:hover{background:#fff}
.sr-size{font-family:var(--serif);font-size:19px;color:var(--ink);line-height:1}
.sr-size i{font-style:normal;font-size:11px;color:var(--ink-4);margin-left:2px}
.sr-name{font-family:var(--serif);font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.4}
.sr-name em{
  display:block;font-style:normal;font-family:var(--sans);font-size:12.5px;
  color:var(--ink-3);font-weight:400;margin-top:4px;
}
.sr-series,.sr-spec{font-size:12.5px;color:var(--ink-3);line-height:1.6}
.sr-cta{font-size:13px;color:var(--gold);text-align:right;font-weight:600}
@media(max-width:960px){
  .sku-row{grid-template-columns:54px 1fr auto;gap:12px}
  .sr-series,.sr-spec{display:none}
  .sr-cta{font-size:12px}
}
@media(max-width:620px){
  .size-head h2{font-size:19px}
  .sr-name{font-size:14.5px}
}

/* 厂区照统一降饱和：压掉绿机与环氧地坪的撞色 */
.shot img{filter:saturate(.34) contrast(1.06) brightness(1.04) sepia(.10)}
.shot:hover img{filter:saturate(.72) contrast(1.04) sepia(.02)}

/* 详情页主图：铺满画框，消除图片自带底色与画框的接缝 */
.pd-main{padding:0;overflow:hidden;background:#EDEBE7}
.pd-main img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}

/* ---------- 收敛：网格子项可收缩，杜绝移动端横向溢出 ---------- */
.pd > *,.grid-2 > *,.grid-3 > *,.grid-4 > *,.stat-row > *,.filters > *{min-width:0}
.table-scroll{max-width:100%;min-width:0;overflow-x:auto}

/* ---------- 移动端压紧纵向节奏 ---------- */
@media(max-width:620px){
  .sec{padding:44px 0}
  .sec--tight{padding:32px 0}
  .sec-head{margin-bottom:28px}
  .feature{padding:20px 18px}
  .feature .idx{margin-bottom:10px}
  .sku-body{padding:14px 14px 16px}
  .cta-block{padding:26px 18px}
  .band-ink{padding:52px 0}
  .foot{padding-top:44px}
  .faq summary{padding:16px 0;font-size:15.5px}
  .hero-tag{position:static;margin-top:10px;box-shadow:none;max-width:none}
  .hero-frame img{aspect-ratio:4/3}
  .hero-proof div{padding:12px 0 12px 12px}
  .hero-proof b{font-size:19px}
  .hero-proof span{font-size:11px}
}
@media(max-width:620px){.hero-tag{display:none}}
@media(max-width:620px){.hero-tag{display:none}}
.sec-head p{text-wrap:balance}
.page-head p{text-wrap:balance}
.page-head p{text-wrap:balance}