/* ==========================================================================
   醇音音响 PURIST AUDIO — 全站样式
   设计系统：暖白 + 近黑 + 铜金；宋体标题 / 黑体正文
   ========================================================================== */

:root{
  --ink:#14120F;
  --ink2:#3A3733;
  --muted:#6F6862;
  --faint:#B8B1A4;
  --line:#E6E1D8;
  --bg:#FBFAF8;
  --surface:#F4F1EC;
  --surface2:#EFEBE3;
  --brass:#9A7B4C;
  --brass-soft:#F0E9DC;

  --serif:"Source Han Serif SC","Noto Serif SC","Songti SC","STZhongsong","华文中宋","SimSun",Georgia,serif;
  --sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,sans-serif;

  --container:1280px;
  --pad:64px;
  --sec-y:128px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
h1,h2,h3,h4,p,figure{margin:0;}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad);}
.serif{font-family:var(--serif);}

/* ---------- 通用：小标签 / 段落 ---------- */
.kicker{
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);font-weight:500;
}
.muted{color:var(--muted);}
.lede{font-size:17px;line-height:1.85;color:var(--ink2);max-width:620px;}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;letter-spacing:.06em;
  padding:15px 34px;border-radius:1px;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.btn-solid{background:var(--ink);color:#fff;}
.btn-solid:hover{background:var(--brass);}
.btn-line{border:1px solid #D5CEC1;color:var(--ink);}
.btn-line:hover{border-color:var(--ink);}
.btn-text{
  padding:0;border-bottom:1px solid var(--faint);
  padding-bottom:3px;font-size:14px;letter-spacing:.04em;
  transition:border-color .3s,color .3s;
}
.btn-text:hover{border-color:var(--brass);color:var(--brass);}

/* ==========================================================================
   头部
   ========================================================================== */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(251,250,248,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.site-head.is-stuck{border-bottom-color:var(--line);}
.head-inner{
  max-width:var(--container);margin:0 auto;padding:0 var(--pad);
  height:78px;display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.brandmark{display:flex;align-items:baseline;gap:11px;flex:0 0 auto;}
.brandmark .cn{
  font-family:var(--serif);font-size:21px;letter-spacing:.1em;
  font-weight:600;line-height:1;
}
.brandmark .en{
  font-size:9.5px;letter-spacing:.26em;color:var(--muted);
  text-transform:uppercase;line-height:1;
}

.nav{display:flex;align-items:center;gap:38px;}
.nav > li{list-style:none;position:relative;}
.nav a.navlink{
  font-size:14px;letter-spacing:.04em;padding:6px 0;
  display:inline-block;position:relative;
}
.nav a.navlink::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--brass);transition:right .35s ease;
}
.nav a.navlink:hover::after,.nav a.navlink.on::after{right:0;}
.nav a.navlink.on{color:var(--ink);}
.nav ul.menu{display:flex;list-style:none;margin:0;padding:0;gap:38px;align-items:center;}

/* 下拉 */
.has-drop:hover .drop{opacity:1;visibility:visible;transform:translateY(0);}
.drop{
  position:absolute;top:calc(100% + 14px);left:-28px;
  background:#fff;border:1px solid var(--line);border-radius:2px;
  padding:22px 26px;min-width:470px;
  box-shadow:0 24px 48px -24px rgba(20,18,15,.18);
  display:grid;grid-template-columns:1fr 1fr;gap:2px 30px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.drop a{
  font-size:13.5px;padding:7px 0;color:var(--ink2);
  display:flex;justify-content:space-between;gap:10px;
  transition:color .2s;
}
.drop a span.en{font-size:10.5px;letter-spacing:.1em;color:var(--faint);}
.drop a:hover{color:var(--brass);}
.drop a:hover span.en{color:var(--brass);opacity:.7;}

/* 移动端菜单按钮 */
.menu-toggle{display:none;width:26px;height:16px;position:relative;}
.menu-toggle i{
  position:absolute;left:0;width:100%;height:1px;background:var(--ink);
  transition:transform .3s,opacity .3s;
}
.menu-toggle i:nth-child(1){top:0;}
.menu-toggle i:nth-child(2){top:50%;}
.menu-toggle i:nth-child(3){bottom:0;}

/* ==========================================================================
   首屏
   ========================================================================== */
.hero{
  min-height:calc(100vh - 78px);
  display:flex;flex-direction:column;justify-content:center;
  padding-top:60px;padding-bottom:0;position:relative;overflow:hidden;
}
.hero .kicker{margin-bottom:34px;}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(38px,6.2vw,78px);
  line-height:1.16;letter-spacing:-.02em;font-weight:600;
  max-width:15em;
}
.hero h1 em{font-style:normal;color:var(--brass);}
.hero .sub{
  margin-top:30px;font-size:17px;color:var(--muted);
  letter-spacing:.02em;
}
.hero .acts{margin-top:44px;display:flex;align-items:center;gap:34px;flex-wrap:wrap;}

/* 首屏两栏：只有后台上传了大图才生效（has-shot 由服务端加）。
   没图时维持原来的纯文字单栏，右列靠 :empty 把自己收掉，不留白。 */
.hero-grid{display:grid;grid-template-columns:1fr;align-items:center;}
.hero-grid.has-shot{grid-template-columns:1fr .82fr;gap:72px;align-items:stretch;}
.hero-shot{overflow:hidden;background:var(--surface);aspect-ratio:16/9;}
/* 有图时两栏等高，图跟着文字区的高度走，不会比左边矮一截显得孤零零 */
.hero-grid.has-shot .hero-shot{aspect-ratio:auto;height:100%;min-height:300px;}
.hero-shot img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-shot:empty{display:none;}

/* 品牌名带 */
.brandstrip{
  margin-top:auto;padding:64px 0 42px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;
}
.brandstrip span{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);
}
.brandstrip span::after{content:"·";margin-left:30px;color:#DAD4C8;}
.brandstrip span:last-child::after{display:none;}

/* ==========================================================================
   区块通用
   ========================================================================== */
section.block{padding-top:var(--sec-y);}
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:40px;margin-bottom:56px;flex-wrap:wrap;
}
.sec-head h2{
  font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);
  line-height:1.28;font-weight:600;letter-spacing:-.01em;
}
.sec-head .kicker{margin-bottom:16px;display:block;}
.sec-head p{font-size:15px;color:var(--muted);max-width:420px;margin-top:14px;}

/* ---------- 品牌网格 ---------- */
.brands-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:52px 26px;
}
.bcard{display:block;group:brand;}
.bcard .thumb{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--surface);
}
.bcard .thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s;
}
.bcard:hover .thumb img{transform:scale(1.035);}
.bcard .meta{padding-top:18px;}
.bcard .cn{
  font-family:var(--serif);font-size:17px;font-weight:600;
  letter-spacing:.02em;line-height:1.4;
}
.bcard .en{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-top:5px;
}
.bcard .desc{
  font-size:13.5px;line-height:1.65;color:var(--muted);margin-top:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* 空态 */
.ph{
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:#A9A296;
  font-size:12px;letter-spacing:.1em;
  border:1px dashed #DDD7CA;
}
.bcard .thumb.ph{aspect-ratio:4/3;}

/* 静默空态：产品位待上传时使用，不加虚线，避免读成报错 */
.ph-quiet{
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:#A9A296;
  font-size:11.5px;letter-spacing:.16em;
}

/* ---------- 信任四格 ---------- */
.trust{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.trust .item{
  padding:44px 30px 44px 0;
  border-left:1px solid var(--line);
}
.trust .item:first-child{border-left:0;padding-left:0;}
.trust .item:not(:first-child){padding-left:30px;}
.trust .no{
  font-size:11px;letter-spacing:.16em;color:var(--brass);margin-bottom:20px;
  font-variant-numeric:tabular-nums;
}
.trust h3{
  font-family:var(--serif);font-size:18px;font-weight:600;
  line-height:1.5;margin-bottom:12px;
}
.trust p{font-size:13.5px;line-height:1.7;color:var(--muted);}

/* ---------- 影像 ---------- */
.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.vcard .cover{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface);
}
.vcard .cover img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.vcard:hover .cover img{transform:scale(1.04);}
.vcard .play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.vcard .play i{
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,18,15,.18);backdrop-filter:blur(2px);
  transition:background .3s,border-color .3s;
}
.vcard .play i::after{
  content:"";width:0;height:0;margin-left:3px;
  border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;
}
.vcard:hover .play i{background:rgba(154,123,76,.9);border-color:transparent;}
.vcard h4{
  font-size:15px;font-weight:500;line-height:1.6;margin-top:16px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vcard .date{font-size:11.5px;color:var(--faint);letter-spacing:.06em;margin-top:8px;}

/* ==========================================================================
   页脚
   ========================================================================== */
.site-foot{
  margin-top:var(--sec-y);border-top:1px solid var(--line);
  padding:74px 0 0;
}
.foot-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;
  padding-bottom:64px;
}
.foot-grid h5{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin-bottom:22px;
}
.foot-brands{display:grid;grid-template-columns:1fr 1fr;gap:2px 24px;}
.foot-brands a,.foot-nav a{
  font-size:13px;color:var(--ink2);line-height:2.1;display:block;
  transition:color .2s;
}
.foot-brands a:hover,.foot-nav a:hover{color:var(--brass);}
.foot-contact p{font-size:13.5px;line-height:2;color:var(--ink2);}
/* 座机、手机各占一行，各自可拨。
   以前用衬线 20px，跟页脚其余无衬线正文是两套字；现与联系页统一为
   无衬线 + 600 字重 + ink 色，只靠字重和颜色分主次。 */
.foot-tels{margin-bottom:8px;}
.foot-contact .tel{
  font-family:inherit;font-size:15px;font-weight:600;line-height:1.75;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;
  color:var(--ink);display:block;transition:color .2s;
}
.foot-contact a.tel:hover{color:var(--brass);}
.foot-qr img{width:104px;height:104px;object-fit:cover;background:#fff;padding:5px;border:1px solid var(--line);}
.foot-qr span{display:block;font-size:11.5px;color:var(--muted);margin-top:10px;}

.foot-bottom{
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:26px 0 34px;flex-wrap:wrap;
}
.foot-bottom p,.foot-bottom a{font-size:11.5px;color:var(--faint);letter-spacing:.02em;}
.foot-bottom .links{display:flex;gap:22px;}
.foot-bottom a:hover{color:var(--ink);}

/* ==========================================================================
   内页通用
   ========================================================================== */
.page-head{padding:56px 0 0;}
.crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12px;color:var(--faint);letter-spacing:.04em;
}
.crumb a{transition:color .2s;}
.crumb a:hover{color:var(--brass);}
.crumb em{font-style:normal;color:var(--muted);}

/* 品牌页抬头 */
.brand-hero{
  display:grid;grid-template-columns:1fr 1.05fr;gap:72px;
  align-items:center;padding:64px 0 0;
}
.brand-hero .txt .kicker{margin-bottom:22px;display:block;}
.brand-hero h1{
  font-family:var(--serif);font-size:clamp(30px,4.4vw,52px);
  line-height:1.2;font-weight:600;letter-spacing:-.01em;
}
.brand-hero .en-name{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-top:14px;
}
.brand-hero .pos{
  margin-top:26px;font-size:16px;line-height:1.8;color:var(--ink2);max-width:26em;
}
.brand-hero .count{
  margin-top:34px;padding-top:24px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);letter-spacing:.04em;
}
.brand-hero .shot{aspect-ratio:4/3;overflow:hidden;background:var(--surface);}
.brand-hero .shot img{width:100%;height:100%;object-fit:cover;}

.prose{max-width:680px;font-size:16px;line-height:1.95;color:var(--ink2);}
.prose p{margin-bottom:22px;}
.prose h3{
  font-family:var(--serif);font-size:21px;font-weight:600;
  color:var(--ink);margin:38px 0 14px;
}

/* 产品网格 */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 26px;}
.pcard .thumb{aspect-ratio:4/3;overflow:hidden;background:var(--surface);}
.pcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.pcard:hover .thumb img{transform:scale(1.04);}
.pcard .model{
  font-family:var(--serif);font-size:16px;font-weight:600;margin-top:16px;
}
.pcard .tagline{
  font-size:13px;color:var(--muted);line-height:1.6;margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* 分页 */
.pager{display:flex;gap:6px;justify-content:center;margin-top:64px;}
.pager a,.pager span{
  min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  font-size:13px;border:1px solid var(--line);color:var(--muted);
  transition:.2s;
}
.pager a:hover{border-color:var(--ink);color:var(--ink);}
.pager .on{background:var(--ink);border-color:var(--ink);color:#fff;}

/* 产品页 */
.prod-top{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:start;padding-top:44px;}
.prod-top .shot{aspect-ratio:4/3;overflow:hidden;background:var(--surface);}
.prod-top .shot img{width:100%;height:100%;object-fit:cover;}
.prod-top h1{
  font-family:var(--serif);font-size:clamp(26px,3.4vw,42px);
  font-weight:600;line-height:1.24;margin-top:16px;
}
.prod-top .tline{margin-top:18px;font-size:15.5px;color:var(--muted);line-height:1.8;}
.spec-list{margin-top:34px;border-top:1px solid var(--line);}
.spec-list div{
  display:flex;justify-content:space-between;gap:24px;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:13.5px;
}
.spec-list dt{color:var(--faint);letter-spacing:.04em;}
.spec-list dd{margin:0;color:var(--ink2);text-align:right;}

/* 联系页
   全页只留三档字号、一套无衬线字体（标题除外，标题是站内统一的设计语言）：
     16    正文 —— 条目值、电话、二维码卡标题
     13.5  注释 —— 二维码下方说明
     12    标签 —— 电话 / 邮箱 / 地址 …
   电话原本是衬线 26px，跟整页的无衬线正文属于两套字体、两个量级。
   现在它和其他条目同级，改用 600 字重 + ink 色来区分主次。 */
.contact-grid{
  --c-text:16px;--c-note:13.5px;--c-label:12px;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-top:44px;
}
.info-row{display:flex;gap:28px;padding:22px 0;border-bottom:1px solid var(--line);}
.info-row .k{
  flex:0 0 88px;font-size:var(--c-label);line-height:1.8;
  letter-spacing:.14em;color:var(--faint);padding-top:3px;
}
.info-row .v{font-size:var(--c-text);line-height:1.8;color:var(--ink2);}
.info-row .v strong{color:var(--ink);font-weight:600;}

/* 联系页由后台生成的部分 */
.chead{padding:48px 0 0;}
.chead h1{font-size:clamp(30px,4.6vw,54px);line-height:1.2;font-weight:600;margin-top:20px;}
.chead .lede{margin-top:28px;}
.info-row.sk{height:70px;background:var(--surface);border-bottom-color:transparent;animation:skpulse 1.4s ease-in-out infinite;}
.info-row .v .c-tel{
  font:inherit;font-weight:600;color:var(--ink);line-height:1.75;
  display:inline-block;
}
.info-row .v a.c-link{border-bottom:1px solid var(--line);}
.info-row .v a.c-link + a.c-link{margin-left:18px;}

/* 右栏：客服微信 + 关注（公众号 / 视频号），上下两块 */
.contact-grid > .c-side{display:flex;flex-direction:column;justify-content:center;gap:22px;}
.c-qr{
  display:flex;gap:22px;align-items:center;
  padding:26px 26px;border:1px solid var(--line);background:#fff;
  max-width:400px;
}
.c-qr img{width:132px;height:132px;object-fit:contain;background:#fff;padding:5px;border:1px solid var(--line);flex-shrink:0;}
.c-qr-t{font-size:var(--c-text,16px);font-weight:600;line-height:1.5;}
.c-qr-sub{font-size:var(--c-note,13.5px);margin-top:8px;line-height:1.75;white-space:pre-line;}

/* 关注面板：两张码并排，标签在下方 */
.c-follow{
  border:1px solid var(--line);background:#fff;padding:24px 26px;max-width:400px;
}
.c-follow h3{font-size:var(--c-text,16px);font-weight:600;margin:0 0 6px;}
.c-follow .cf-note{font-size:var(--c-note,13.5px);color:var(--muted);margin:0 0 18px;line-height:1.7;}
.cf-grid{display:flex;gap:20px;}
.cf-grid figure{margin:0;flex:1;min-width:0;text-align:center;}
.cf-grid img{
  width:100%;max-width:132px;aspect-ratio:1;object-fit:contain;display:block;margin:0 auto;
  background:#fff;padding:5px;border:1px solid var(--line);
}
.cf-grid figcaption{font-size:var(--c-note,13.5px);color:var(--muted);margin-top:9px;line-height:1.5;}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1180px){
  :root{--pad:40px;--sec-y:96px;}
  .brands-grid{grid-template-columns:repeat(3,1fr);}
  .prod-grid{grid-template-columns:repeat(3,1fr);}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
  .foot-qr{grid-column:1/-1;}
}
@media (max-width:900px){
  .nav ul.menu{gap:24px;}
  .brand-hero{grid-template-columns:1fr;gap:40px;}
  .brand-hero .shot{aspect-ratio:4/3;order:-1;}
  .prod-top{grid-template-columns:1fr;gap:40px;}
  .contact-grid{grid-template-columns:1fr;gap:48px;}
  .trust{grid-template-columns:1fr 1fr;}
  .trust .item{border-left:0;padding:32px 0;border-top:1px solid var(--line);}
  .trust .item:first-child,.trust .item:nth-child(2){border-top:0;}
  .trust .item:nth-child(2n){padding-left:24px;border-left:1px solid var(--line);}
  .videos{grid-template-columns:1fr 1fr;}
  .videos .vcard:last-child{display:none;}
}
@media (max-width:720px){
  :root{--pad:20px;--sec-y:72px;}
  .head-inner{height:64px;}
  .nav ul.menu{
    position:fixed;inset:64px 0 auto 0;background:var(--bg);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:8px 20px 24px;border-bottom:1px solid var(--line);
    display:none;
  }
  .nav ul.menu.open{display:flex;}
  .nav ul.menu > li{width:100%;border-bottom:1px solid var(--line);}
  .nav ul.menu > li:last-child{border-bottom:0;}
  .nav a.navlink{padding:15px 0;font-size:15px;width:100%;}
  .drop{display:none;}
  .menu-toggle{display:block;}

  .hero{min-height:auto;padding-top:74px;padding-bottom:0;}
  /* 单列时两栏等高没意义，图回到标准 16:9，否则 height:100% 会撑成方图 */
  .hero-grid.has-shot{grid-template-columns:1fr;gap:38px;align-items:start;}
  .hero-grid.has-shot .hero-shot{height:auto;aspect-ratio:16/9;min-height:0;}
  .hero h1{font-size:34px;}
  .hero .sub{font-size:15px;}
  .hero .acts{gap:22px;}
  .brandstrip{margin-top:56px;padding:34px 0 26px;gap:10px 18px;}
  .brandstrip span::after{margin-left:18px;}

  .brands-grid{grid-template-columns:1fr 1fr;gap:34px 16px;}
  .prod-grid{grid-template-columns:1fr 1fr;gap:30px 16px;}
  .bcard .cn{font-size:15px;}
  .bcard .desc{font-size:12.5px;}
  .sec-head{margin-bottom:36px;}
  .videos{grid-template-columns:1fr;gap:34px;}
  .videos .vcard:last-child{display:block;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .site-foot{padding-top:52px;}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:12px;}
  .pager{margin-top:44px;}

  /* 手机上标签只占两字宽，把空间留给号码和地址。
     字号不跟着缩 —— 电话已与正文同级，再单独放大就破了统一的刻度 */
  .info-row{gap:18px;}
  .info-row .k{flex:0 0 56px;}
}

/* ==========================================================================
   后台内容兜底（接 CMS 之后才需要，静态页不受影响）
   目的：运营在富文本里粘什么，版式都不能崩
   ========================================================================== */

/* 没有子栏目的导航项，悬停时不能弹出一个空白框 */
.drop:empty{display:none;}

/* 分页为空（产品不足一页）时不留下 64px 空洞 */
.pager:empty{display:none;}

/* 一句话卖点 / 品牌定位为空时，不留空行 */
.pcard .tagline:empty,.bcard .desc:empty{display:none;}

/* 品牌介绍没填时，整段收起（含 88px 上边距），而不是留一大块白 */
.block:has(> .wrap > .prose:empty){display:none;}

/* 富文本正文排布 */
.prose h2{
  font-family:var(--serif);font-size:clamp(22px,2.4vw,28px);font-weight:600;
  color:var(--ink);line-height:1.4;margin:52px 0 18px;
}
.prose h4{
  font-size:16px;font-weight:600;color:var(--ink);margin:30px 0 10px;
}
.prose img{
  width:100%;height:auto;margin:34px 0;background:var(--surface);
}
.prose ul,.prose ol{padding-left:22px;margin-bottom:22px;}
.prose li{margin-bottom:8px;}
.prose blockquote{
  margin:30px 0;padding:2px 0 2px 22px;border-left:2px solid var(--brass);
  color:var(--muted);
}
.prose table{width:100%;border-collapse:collapse;margin:30px 0;font-size:14px;}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:11px 12px;text-align:left;}
.prose th{color:var(--faint);font-weight:500;letter-spacing:.04em;}
.prose a{border-bottom:1px solid var(--line);transition:color .2s,border-color .2s;}
.prose a:hover{color:var(--brass);border-color:var(--brass);}
.prose iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;margin:30px 0;border:0;}
.prose > *:first-child{margin-top:0;}
.prose > *:last-child{margin-bottom:0;}

/* Word 粘贴常带来自定义字体，会把全站字体打乱；只压字体，不动字号 */
.prose font,.prose [style*="font-family"]{font-family:inherit !important;}

/* 正文里贴长的代码块不撑破布局 */
.prose > pre{max-width:100%;overflow-x:auto;}


/* ==========================================================================
   数据加载状态（前台从后台取数时用）
   三种状态各有各的样子：加载中、空、出错。
   分不清这三种，是前台接数据后最容易出现的体验问题。
   ========================================================================== */

/* -- 空态：还没内容。不报警、不用红色，只是一句说明 -- */
.data-empty{
  grid-column:1/-1;
  padding:64px 28px;
  border:1px solid var(--line);
  background:var(--bg);
  text-align:center;
}
.data-empty p{
  margin:0;
  font-family:var(--serif);
  font-size:17px;
  color:var(--ink2);
  letter-spacing:.02em;
}
.data-empty span{
  display:block;
  margin-top:8px;
  font-size:12.5px;
  color:var(--faint);
  letter-spacing:.04em;
}

/* -- 骨架：正在加载。比转圈更能稳住版面 -- */
.bcard.sk{
  aspect-ratio:4/3;
  background:var(--surface);
  border:1px solid #EFEBE3;
  border-radius:2px;
  animation:skpulse 1.5s ease-in-out infinite;
}
@keyframes skpulse{
  0%,100%{opacity:1;}
  50%{opacity:.55;}
}
@media (prefers-reduced-motion:reduce){
  .bcard.sk{animation:none;}
}

/* -- 缩略图里的内容图统一裁切，后台传什么比例都不会破版 -- */
.bcard .thumb img,.pcard .thumb img{
  width:100%;height:100%;object-fit:cover;
}
.brand-hero .shot img{width:100%;height:100%;object-fit:cover;}
.prod-top .shot img{width:100%;height:100%;object-fit:cover;}


/* ==========================================================================
   产品页：价格行 + 图文混排的介绍
   ========================================================================== */

.price-row{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 14px;
  margin-top:26px;
}
.price-row[hidden]{display:none;}
.price-row .amt{
  font-family:var(--serif);
  font-size:clamp(22px,2.4vw,30px);
  font-weight:600;letter-spacing:.01em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.price-row .note{font-size:12.5px;color:var(--faint);letter-spacing:.03em;}

/* 介绍区比正文略宽：文字仍按 680 的行长读，图片可以再撑开一点 */
.prose-wide{max-width:760px;}
.prose figure{margin:40px 0;}
.prose figure img{margin:0;width:100%;height:auto;background:var(--surface);}
.prose figcaption{
  margin-top:12px;font-size:12.5px;color:var(--faint);
  line-height:1.65;letter-spacing:.03em;
}
.prose .pseg > *:last-child{margin-bottom:0;}

@media (max-width:640px){
  .price-row{margin-top:20px;}
  .prose figure{margin:30px 0;}
}