.pd h1{font-size:30px;margin:0 0 6px;font-weight:600}
.pd .sku{color:var(--sub);font-size:13.5px;margin-bottom:16px}
.pd .price{font-size:24px;font-weight:700;color:var(--brand-d)}
.pd .price .price-pc{font-size:15px;font-weight:500;color:var(--sub)}
.pd .price-cny{font-size:13.5px;color:var(--sub);margin-top:3px}
.pd .carton{color:var(--sub);margin:4px 0 18px}
.ex{font-style:normal;font-size:10.5px;color:#b08968;border:1px solid #e8d3c4;border-radius:4px;padding:0 4px;margin-left:5px;vertical-align:1px;white-space:nowrap}
.specnote{font-size:11.5px;color:#b08968;margin:7px 0 0;line-height:1.6}
.shades label{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 12px;margin:0 9px 9px 0;cursor:pointer;font-size:13.5px;transition:.15s}
.shades label:hover{border-color:var(--brand)}
.shades input{accent-color:var(--brand)}
.qty{width:56px;padding:7px;border:1px solid var(--line);border-radius:7px;text-align:center;font-family:inherit}
.addbar{display:flex;gap:14px;margin-top:22px;align-items:center;flex-wrap:wrap}
.spectable{width:100%;border-collapse:collapse;margin:18px 0 4px}
.spectable td{border:1px solid var(--line);padding:11px 14px;font-size:14px;vertical-align:top}
.spectable td:first-child{background:var(--bg);color:var(--sub);width:38%;font-weight:600;text-transform:uppercase;font-size:11.5px;letter-spacing:.03em}
.rel{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.notebox{background:var(--blush);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:18px 0;font-size:14px;color:var(--ink2)}
.review{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:12px;box-shadow:var(--shadow)}
.review .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.review .who{font-weight:600;font-size:14px}
.review .st{color:var(--gold);font-size:13px}
.review p{margin:0;color:var(--sub);font-size:14px}
details{border:1px solid var(--line);border-radius:12px;padding:0 18px;margin-bottom:10px;background:#fff}
details summary{cursor:pointer;padding:15px 0;font-weight:600;font-size:15px;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary:before{content:"+";color:var(--brand);font-weight:700;margin-right:10px}
details[open] summary:before{content:"\2212"}
details p{margin:0 0 15px;color:var(--sub);font-size:14px}

/* CAPABILITY / PROCESS */
.cap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:24px}
.cap{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:var(--shadow);display:flex;gap:16px;align-items:flex-start}
.cap .ic{font-size:24px;flex-shrink:0;width:44px;height:44px;border-radius:11px;background:var(--gold-s);color:var(--brand-d);display:flex;align-items:center;justify-content:center}
.cap h3{margin:0 0 6px;font-size:16px}
.cap p{margin:0;color:var(--sub);font-size:14px}
.timeline{position:relative;margin-top:30px;padding-left:28px}
.timeline:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline .ev{position:relative;padding:0 0 26px 18px}
.timeline .ev:before{content:"";position:absolute;left:-28px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--brand);border:3px solid var(--bg)}
.timeline .ev b{display:block;font-family:var(--serif);font-size:19px;color:var(--brand-d)}
.timeline .ev span{color:var(--sub);font-size:14px}

/* CERT CARDS */
.certcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow);text-align:center}
.certcard .cic{width:54px;height:54px;border-radius:14px;background:var(--gold-s);color:var(--brand-d);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 14px}
.certcard h3{margin:0 0 6px;font-size:15px}
.certcard p{margin:0;color:var(--sub);font-size:13px}
.certcard .code{margin-top:10px;font-size:11.5px;color:var(--sub);font-family:monospace}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;margin-top:26px}
.info-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--shadow)}
.info-box .row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.info-box .row:last-child{border-bottom:none}
.info-box .ic{font-size:20px;color:var(--brand)}
.info-box .row b{display:block;font-size:13px;color:var(--sub);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.info-box .row span{font-size:15px;color:var(--ink)}
.map-box{aspect-ratio:16/9;border-radius:16px;background:linear-gradient(135deg,#e9dcd3,#f3e9e0);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:13px;text-align:center;margin-top:16px;box-shadow:var(--shadow)}

/* FORM */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:640px;margin-top:22px}
.form-grid .full{grid-column:1/-1}
input,textarea,select{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;font-size:14.5px;font-family:inherit;background:#fff;color:var(--ink)}
input:focus,textarea:focus{border-color:var(--brand);outline:none}

/* FAQ PAGE */
.faq-cat{font-family:var(--serif);font-size:22px;color:var(--brand-d);margin:30px 0 14px}

/* FOOTER */
footer{background:#2b201c;color:#d8c6ba;padding:60px 0 30px;font-size:13.5px;margin-top:40px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer .logo{color:#fff;margin-bottom:12px}
footer .logo .logo-mark{height:32px}
footer .logo .logo-wm{color:#fff}
footer .logo i{color:var(--gold)}
footer p{opacity:.8;max-width:280px}
footer h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px;font-weight:600}
footer a{display:block;opacity:.8;margin-bottom:8px;cursor:pointer;transition:.15s}
footer a:hover{opacity:1;color:var(--gold-s)}
.foot-bot{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:20px;text-align:center;opacity:.6;font-size:12.5px}

@media(max-width:980px){.hero .wrap{grid-template-columns:1fr}.hero-visual{max-width:380px}.cat-grid{grid-template-columns:repeat(3,1fr)}.why,.steps,.cap-grid,.quote-row,.blog-grid,.faqq{grid-template-columns:1fr}.strength,.markets,.pd,.contact-grid{grid-template-columns:1fr;gap:30px}.pstats{grid-template-columns:repeat(2,1fr)}.cat-layout{grid-template-columns:1fr}.facet{position:static}.rel{grid-template-columns:repeat(2,1fr)}footer .wrap{grid-template-columns:1fr 1fr}.pledge .wrap{grid-template-columns:1fr 1fr;gap:16px 20px}}
.nav-inner{align-items:center}
.wa-btn{background:none;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;color:var(--ink);text-decoration:none}
.nav-right{display:flex;align-items:center;gap:14px;margin-left:auto;position:relative}
.icon-btn{background:none;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;color:var(--ink)}
.icon-lang{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none;cursor:pointer}
/* 注：原用 var(--rose-deep)，该变量从未定义 → stroke 整条声明失效退回 none，图标全透明看不见。
   改用色板里已存在的 --brand-d（#7a5d59），同样是深灰玫瑰。 */
.nav-ico{width:20px;height:20px;stroke:var(--brand-d);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s}
.icon-btn:hover .nav-ico,.icon-lang:hover .nav-ico,.wa-btn:hover .nav-ico{stroke:var(--gold)}
/* 导航搜索：图标按钮 + 下拉式搜索面板
   搜索图标单独放大到 24px 并给 38px 圆形热区（含 hover 浅玫瑰底），
   让它在一排导航里更容易被注意到；其他 .nav-ico 仍是 20px。

   两处修正（2026-10-30）：
   1) 之前白底/边框/阴影/圆角全画在 input 上，父级 .search-form 是 overflow:hidden 的
      264×38 方框，input 的下投影（0 6px 18px）超出这个方框被矩形裁切 →
      胶囊下面露出一条直边的浅色块，看着像"椭圆压着长方形"。
      现在视觉（白底+边框+99px 圆角+阴影）全部交给容器画，input 透明无边框，
      容器自身的 box-shadow 不受 overflow 影响，裁切问题消失。
   2) 面板从图标左侧展开会压住导航的 FAQ / Contact（Inquiry List 有数字变宽时压得更多），
      所以改成挂在导航下方的下拉面板，宽度 240px，不遮挡任何菜单项。
      面板的定位基准是 .nav-right（不是 .nav-search）：右边缘对齐 Inquiry List 的右边缘，
      整块从右侧工具区往下拉，位置也不会随 Inquiry List 变宽而左右跳。
   宽度固定、动画只做 opacity + translateY，避免 width 动画把 99px 圆角挤成方块。 */
.nav-search{display:flex;align-items:center}
.search-toggle{background:none;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;transition:background .18s ease}
.search-toggle .nav-ico{width:24px;height:24px;stroke-width:1.85}
.search-toggle:hover{background:rgba(154,123,119,.13)}
/* hover 时图标变香槟金，沿用上面 .icon-btn:hover .nav-ico 的规则，这里不覆盖 */
/* top:60px = .nav-right 上沿(y≈14) + 60 = 74，正好在导航(71)下方 3px。
   不用 calc(100% + …) 是因为 .nav-right 高度随 Inquiry List 内容轻微变化，
   用百分比会让面板上下抖。 */
.search-form{position:absolute;top:60px;right:0;width:min(240px,60vw);height:40px;z-index:60;
  display:flex;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:99px;
  box-shadow:0 10px 26px rgba(58,43,38,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .16s ease,transform .18s ease,visibility .16s}
.nav-search.open .search-form{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.search-form input{width:100%;height:38px;border:0;border-radius:99px;padding:0 16px;font-family:inherit;font-size:13.5px;
  background:transparent;color:var(--ink);outline:none;display:block;box-shadow:none;-webkit-appearance:none;appearance:none}
.search-form:focus-within{border-color:var(--brand)}
.search-form input::placeholder{color:var(--sub);opacity:.85}
/* 搜索面板展开时，让下方跑马灯的文字淡出（保留深棕色底条）
   面板宽 240 压不住整条 47px 的跑马灯，两侧会露出半截单词（"PRIVATE LA|BEL"），
   淡出文字后深色条变成导航的视觉延伸，胶囊浮在上面更干净。
   用 :has() 纯 CSS 联动，不改 JS；不支持 :has 的老浏览器只是不淡出，功能不受影响。 */
.marquee .track{transition:opacity .18s ease}
header.nav:has(.nav-search.open) + .marquee .track{opacity:0}
.dropdown{position:relative;display:inline-block}
.dd-toggle{cursor:pointer}
.dd-menu{display:none;position:absolute;top:calc(100% + 12px);left:0;background:#fff;min-width:208px;box-shadow:0 14px 34px rgba(120,90,80,.20);border-radius:0 0 12px 12px;padding:8px 0;z-index:60;border:1px solid rgba(120,90,80,.08)}
.dropdown:hover .dd-menu{display:block}
.dd-menu a{display:block;padding:11px 22px;color:var(--ink);white-space:nowrap;font-size:14px;border-radius:0}
.dd-menu a:hover{background:var(--bg2);color:var(--brand-d)}
@media(max-width:620px){.cat-grid{grid-template-columns:repeat(2,1fr)}.form-grid,.attr{grid-template-columns:1fr}.nav-links{display:none}.cat-layout{grid-template-columns:1fr}}

/* ===== 站点外壳补充：demo 原版在手机上直接隐藏导航，这里补汉堡菜单 ===== */
.foot-bot{grid-column:1/-1}
footer .wrap.foot-bot{display:block;text-align:center}
.nav-links a.active{color:var(--ink);font-weight:600}
.nav-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold)}
.nav-burger{display:none;background:none;border:0;padding:8px 6px;cursor:pointer;flex-direction:column;gap:5px;margin-left:2px}
.nav-burger span{display:block;width:21px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:980px){
  .nav-burger{display:flex}
  .nav-inner{gap:14px}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:6px 28px 16px;box-shadow:var(--shadow);z-index:45}
  .nav-links.open{display:flex}
  .nav-links>a,.dd-toggle{display:block;width:100%;padding:13px 0!important;border-bottom:1px solid var(--line)}
  .nav-links .dropdown{display:block;width:100%}
  .dd-menu{position:static;display:block;box-shadow:none;min-width:0;background:transparent;padding:0 0 8px 14px;border:0}
  .dd-menu a{padding:9px 0;font-size:13.5px;color:var(--ink2)}
  .cart-btn{padding:9px 15px;font-size:13px}
}
@media(max-width:420px){
  .cart-btn{font-size:12px;padding:8px 12px}
  .logo{font-size:23px}
}

/* ===== 首页模板补充 ===== */
section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cat-card,.by-post{display:block}
.prod-name{display:block}
.prod-name:hover{color:var(--brand)}
.prod-img img{width:100%;height:100%;object-fit:cover;display:block}
.prod-card .prod-img{position:relative}
.hero-visual .motif{width:min(56%,260px);height:auto}
.why .b .ic,.pledge .b .ic{line-height:1}
/* 页脚版权行：版权 + 法务链接并排（替代原来单独一行的法务链接） */
footer .wrap.foot-bot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;text-align:left}
.foot-bot .foot-legal{white-space:nowrap;flex:0 0 auto}
.foot-bot .foot-legal a{display:inline;color:inherit;text-decoration:none;margin:0 2px;border-bottom:1px solid transparent}
.foot-bot .foot-legal a:hover{border-bottom-color:currentColor;opacity:1}
@media (max-width:820px){
  footer .wrap.foot-bot{justify-content:center;text-align:center;gap:4px;padding-right:0}
  .foot-bot .foot-legal{white-space:normal;width:100%;text-align:center}
}
/* 回到顶部按钮 */
.by-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.08);background:#2b201c;color:#f2e8df;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:900;padding:0;
  box-shadow:0 8px 22px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,background .2s}
.by-top.on{opacity:1;visibility:visible;transform:none}
.by-top:hover{background:#7a5d59}
.by-top:active{transform:scale(.94)}
.by-top svg{width:20px;height:20px;display:block}
@media (max-width:600px){.by-top{right:14px;bottom:14px;width:42px;height:42px}}
/* 隐藏 Astra 自带 Scroll to Top：样式未生效（裸露成左下向下箭头）且与本主题 .by-top 重复 */
#ast-scroll-top{display:none !important}