:root{
  --paper:#F3F0EA;
  --paper2:#FBF9F5;
  --card:#FFFFFF;
  --ink:#1B1A17;
  --ink2:#5E594F;
  --ink3:#A29B8E;
  --line:rgba(27,26,23,.10);
  --line2:rgba(27,26,23,.055);
  --gold:#8A7546;
  --gold2:#B79A5D;
  --moss:#6C7A5F;
  --blue:#6E7E8B;
  --clay:#A8714F;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
body{
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(138,117,70,.07) 0%, rgba(138,117,70,0) 62%),
    var(--paper);
  min-height:100vh;overflow-x:hidden;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font:inherit}
a{color:inherit;text-decoration:none}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:8px;
  padding:11px 16px;background:rgba(243,240,234,.88);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line2)}
.hd-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;margin-left:-6px;color:var(--ink2)}
.hd-brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.hd-mark{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--paper2);background:var(--ink);letter-spacing:0}
.hd-title{font-size:15px;font-weight:500;letter-spacing:.2em}
.hd-sub{font-size:8.5px;letter-spacing:.3em;color:var(--ink3)}
.hd-act{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--ink2)}

/* ---------- search ---------- */
.search-wrap{padding:10px 16px;background:var(--paper);border-bottom:1px solid var(--line2)}
.search-box{display:flex;align-items:center;gap:9px;background:var(--card);
  border:1px solid var(--line);border-radius:2px;padding:9px 12px}
.search-box svg{color:var(--gold);flex:none}
.search-box input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);font-size:13.5px}
.search-box input::placeholder{color:var(--ink3)}
.search-box button{color:var(--ink2);font-size:12.5px;flex:none}

/* ---------- layout ---------- */
#view{padding-bottom:calc(30px + var(--safe-b))}
.sec{padding:22px 16px 4px}
.sec-hd{display:flex;align-items:baseline;gap:9px;margin-bottom:13px}
.sec-t{font-size:12.5px;letter-spacing:.2em;color:var(--ink);font-weight:500}
.sec-en{font-size:8.5px;letter-spacing:.26em;color:var(--ink3);text-transform:uppercase}
.sec-line{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.sec-more{font-size:10.5px;color:var(--gold);letter-spacing:.14em}

/* ---------- hero ---------- */
.hero{margin:16px 16px 0;position:relative;overflow:hidden;background:#201F1C;
  border:1px solid var(--line)}
.hero-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.hero-track::-webkit-scrollbar{display:none}
.hero-item{flex:0 0 100%;scroll-snap-align:center;position:relative;aspect-ratio:4/3;background:#201F1C}
.hero-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-item::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,19,17,.02) 0%,rgba(20,19,17,.30) 46%,rgba(20,19,17,.88) 100%)}
.hero-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;z-index:2}
.hero-kicker{font-size:8.5px;letter-spacing:.34em;color:var(--gold2);margin-bottom:7px}
.hero-h{font-size:18px;font-weight:500;letter-spacing:.05em;line-height:1.4;color:#F6F3ED}
.hero-p{font-size:11.5px;color:rgba(246,243,237,.7);margin-top:5px}
.hero-dots{position:absolute;left:0;right:0;bottom:7px;display:flex;justify-content:center;gap:5px;z-index:3}
.hero-dots i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3);transition:.25s}
.hero-dots i.on{width:14px;border-radius:2px;background:var(--gold2)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:6px 12px;border-radius:2px;border:1px solid var(--line);
  background:transparent;color:var(--ink2);font-size:12px;letter-spacing:.04em}
.chip.on{border-color:var(--ink);color:var(--paper2);background:var(--ink)}
.chip .n{font-size:9.5px;color:var(--ink3);margin-left:5px}
.chip.on .n{color:rgba(251,249,245,.6)}

/* ---------- brand ---------- */
.brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.brand-card{position:relative;padding:12px 10px;border:1px solid var(--line2);
  background:var(--card);overflow:hidden;min-width:0;text-align:left;width:100%}
.brand-card b{display:block;font-size:12.5px;font-weight:500;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-card span{font-size:9.5px;color:var(--ink3);letter-spacing:.06em}
.brand-card::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--gold2),transparent)}

/* ---------- product ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 16px}
.grid > *{min-width:0}
.card{background:var(--card);border:1px solid var(--line2);position:relative;overflow:hidden}
.card-img{position:relative;aspect-ratio:3/4;background:#F0EDE6;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-badge{position:absolute;top:8px;left:8px;padding:2px 7px;
  font-size:9px;letter-spacing:.1em;color:var(--paper2);background:rgba(27,26,23,.72)}
.card-angles{position:absolute;bottom:8px;right:8px;padding:2px 6px;
  font-size:9px;color:var(--ink2);background:rgba(251,249,245,.86)}
.card-body{padding:10px 11px 12px}
.card-name{font-size:12.5px;line-height:1.5;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:37px}
.card-meta{display:flex;align-items:baseline;justify-content:space-between;margin-top:8px;gap:6px}
.card-price{font-size:13.5px;font-weight:500;color:var(--gold);letter-spacing:.02em}
.card-brand{font-size:9.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}

.empty{padding:56px 20px;text-align:center;color:var(--ink3);font-size:12.5px}
.loading{padding:26px;text-align:center;color:var(--ink3);font-size:11.5px;letter-spacing:.1em}

/* ---------- about ---------- */
.about{margin:22px 16px 0;padding:22px 18px;background:#EDEFE8;border:1px solid rgba(108,122,95,.18)}
.about .sec-hd{margin-bottom:12px}
.about-lead{font-size:14px;letter-spacing:.06em;color:var(--ink);margin:0 0 8px}
.about-body{font-size:12.5px;line-height:1.85;color:var(--ink2);margin:0}

/* ---------- detail ---------- */
.dt-gallery{position:relative;background:#F0EDE6}
.dt-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.dt-track::-webkit-scrollbar{display:none}
.dt-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:3/4;background:#F0EDE6}
.dt-slide img{width:100%;height:100%;object-fit:contain}
.dt-count{position:absolute;right:14px;bottom:12px;padding:3px 9px;
  font-size:10.5px;color:var(--ink2);background:rgba(251,249,245,.9);z-index:3}
.dt-dots{display:flex;justify-content:center;gap:5px;padding:11px 0 2px}
.dt-dots i{width:4px;height:4px;border-radius:50%;background:rgba(27,26,23,.16)}
.dt-dots i.on{width:13px;border-radius:2px;background:var(--gold)}
.dt-info{padding:8px 16px 24px}
.dt-brand{font-size:9.5px;letter-spacing:.26em;color:var(--gold);text-transform:uppercase}
.dt-name{font-size:15.5px;line-height:1.6;margin:9px 0 14px;white-space:pre-wrap;word-break:break-word}
.dt-price-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 15px;background:var(--card);border:1px solid var(--line);border-left:2px solid var(--gold)}
.dt-price{font-size:23px;font-weight:500;color:var(--ink);letter-spacing:.01em}
.dt-price small{font-size:11.5px;color:var(--gold);margin-right:2px}
.dt-band{padding:4px 9px;font-size:10px;border:1px solid var(--line);color:var(--ink2);background:var(--paper2)}
.dt-specs{margin-top:18px;border-top:1px solid var(--line2)}
.dt-row{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line2);font-size:12px}
.dt-row b{color:var(--ink3);font-weight:400;flex:0 0 58px;letter-spacing:.08em}
.dt-row span{color:var(--ink2);flex:1;word-break:break-word}
.dt-actions{display:flex;gap:10px;margin-top:18px}
.btn{flex:1;padding:13px;font-size:12.5px;letter-spacing:.14em;text-align:center;
  border:1px solid var(--ink);color:var(--paper2);background:var(--ink)}
.btn.ghost{color:var(--ink2);border-color:var(--line);background:transparent}

/* ---------- promise ---------- */
.dt-promise{margin-top:20px;padding:16px 15px;background:#EFEDE6;border:1px solid var(--line2)}
.dt-promise-t{font-size:10px;letter-spacing:.28em;color:var(--gold);margin-bottom:10px}
.dt-promise ul{margin:0;padding:0;list-style:none}
.dt-promise li{font-size:11.5px;color:var(--ink2);line-height:1.95;
  padding-left:11px;position:relative}
.dt-promise li::before{content:"";position:absolute;left:0;top:.82em;
  width:4px;height:1px;background:var(--gold2)}

/* ---------- sheet ---------- */
.sheet-mask{position:fixed;inset:0;background:rgba(27,26,23,.42);z-index:80;opacity:0;transition:.22s}
.sheet-mask.on{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:81;background:var(--paper2);
  border-top:1px solid var(--line);padding:18px 16px calc(20px + var(--safe-b));
  transform:translateY(100%);transition:.26s cubic-bezier(.3,.8,.3,1)}
.sheet.on{transform:translateY(0)}
.sheet-t{font-size:11.5px;letter-spacing:.18em;color:var(--ink2);margin-bottom:13px}
.swatch{display:flex;align-items:center;gap:10px;padding:11px 12px;
  border:1px solid var(--line2);background:var(--card);margin-bottom:8px;font-size:12.5px}
.swatch i{width:15px;height:15px;border-radius:50%;border:1px solid var(--line)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(78px + var(--safe-b));transform:translate(-50%,10px);
  background:rgba(27,26,23,.94);color:var(--paper2);padding:10px 17px;
  font-size:12px;z-index:90;opacity:0;pointer-events:none;transition:.25s;
  white-space:nowrap;max-width:88vw;overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- admin ---------- */
.adm{padding:18px 16px 30px}
.adm-note{font-size:11px;color:var(--ink3);line-height:1.8;border:1px dashed var(--line);
  padding:11px 13px;margin-bottom:16px}
.adm-item{display:flex;gap:10px;padding:10px;border:1px solid var(--line2);
  margin-bottom:9px;align-items:center;background:var(--card)}
.adm-item img{width:50px;height:64px;object-fit:cover;flex:none;background:var(--paper)}
.adm-item .f{flex:1;min-width:0}
.adm-item input{width:100%;background:var(--paper2);border:1px solid var(--line2);
  padding:6px 8px;color:var(--ink);font-size:11.5px;margin-top:5px;outline:none}
.adm-item .k{font-size:9.5px;color:var(--ink3);letter-spacing:.1em}
.adm-del{color:var(--clay);font-size:10.5px;padding:6px 8px;flex:none}
.adm-bar{display:flex;gap:9px;margin-top:14px}
.adm-bar .btn{font-size:11.5px;padding:11px;letter-spacing:.08em}

/* ---------- first-visit gate ---------- */
.gate{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(27,26,23,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s}
.gate.on{opacity:1}
.gate-card{width:74%;max-width:300px;padding:30px 24px 24px;text-align:center;
  background:var(--paper2);border:1px solid rgba(138,117,70,.35);
  transform:translateY(6px);transition:transform .3s}
.gate.on .gate-card{transform:translateY(0)}
.gate-mark{font-size:13px;letter-spacing:.34em;color:var(--ink);margin-bottom:18px}
.gate-line{font-size:13px;color:var(--ink);letter-spacing:.1em;margin:0 0 7px}
.gate-sub{font-size:11px;color:var(--ink3);letter-spacing:.1em;margin:0 0 22px}
.gate-btn{width:100%;padding:11px;font-size:12px;letter-spacing:.22em;
  color:var(--paper2);background:var(--ink);border:1px solid var(--ink)}

/* ================= v3：多元配色 · 过渡 · 新板块 ================= */
[data-a="1"]{--acc:#6E7E8B}
[data-a="2"]{--acc:#8A7A5C}
[data-a="3"]{--acc:#A8714F}
[data-a="4"]{--acc:#6C7A5F}
[data-a="5"]{--acc:#5F6B7A}
[data-a="6"]{--acc:#7A6A8C}
[data-a="7"]{--acc:#8A7546}
.sec .sec-t{position:relative;padding-left:16px}
.sec .sec-t::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--acc,var(--gold));opacity:.9}
.sec .sec-en{color:var(--acc,var(--ink3));opacity:.8}
.sec .sec-line{background:linear-gradient(90deg,var(--acc,var(--line)),transparent);opacity:.45}
.about{border-color:rgba(95,107,122,.2)}

.manifesto{padding:28px 20px 4px;text-align:center}
.manifesto .mf-k{font-size:8.5px;letter-spacing:.36em;color:var(--gold);margin-bottom:11px}
.manifesto .mf-h{font-size:14.5px;line-height:1.95;letter-spacing:.1em;color:var(--ink);margin:0;font-weight:400}

.prov{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line2);border:1px solid var(--line2)}
.prov li{display:flex;gap:14px;padding:12px 14px;background:var(--card);align-items:baseline}
.prov b{flex:0 0 44px;font-weight:400;font-size:10.5px;letter-spacing:.18em;color:var(--acc,var(--gold))}
.prov span{font-size:11.5px;color:var(--ink2);line-height:1.7}
.dt-promise-f{font-size:10.5px;color:var(--ink3);line-height:1.85;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line2)}

@keyframes rin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#view > *{animation:rin .34s cubic-bezier(.22,.61,.36,1) both}
#view > *:nth-child(2){animation-delay:.05s}
#view > *:nth-child(3){animation-delay:.1s}
#view > *:nth-child(4){animation-delay:.14s}
#view > *:nth-child(5){animation-delay:.18s}
.card{animation:rin .3s ease both}
@media (prefers-reduced-motion:reduce){#view > *,.card{animation:none}}
.sec-sub{margin:-4px 0 12px;padding-left:16px;font-size:11.5px;letter-spacing:.1em;color:var(--ink3)}
/* ================= v4：价格规则 · 颜色切换 ================= */
.dt-price.inq{font-size:17px;letter-spacing:.14em;color:var(--ink2)}
.dt-cta{margin-top:10px;padding:11px 14px;text-align:center;font-size:12px;letter-spacing:.12em;
  color:var(--paper2);background:var(--ink);border:1px solid var(--ink)}
.dt-cta b{color:var(--gold2);font-weight:500;letter-spacing:.16em}
.dt-colorbar{display:flex;flex-wrap:wrap;gap:7px;padding:12px 16px 4px}
.dt-colorbar .cl{font-size:11px;color:var(--ink3);letter-spacing:.12em}
.csw{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;
  border:1px solid var(--line);background:var(--card);font-size:11.5px;color:var(--ink2);letter-spacing:.06em}
.csw i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(27,26,23,.18)}
.csw.on{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* ===== 修复：首访遮罩关闭后仍拦截点击 ===== */
.gate[hidden]{display:none!important}
.gate{pointer-events:none}
.gate.on{pointer-events:auto}

/* ===== 画廊左右箭头 · 缩略图 ===== */
.dt-gallery{position:relative}
.dt-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;color:var(--ink);background:rgba(251,249,245,.86);
  border:1px solid var(--line);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.dt-nav.prev{left:10px}
.dt-nav.next{right:10px}
.dt-nav:active{background:var(--paper2)}
.dt-thumbs{display:flex;gap:7px;padding:10px 16px 2px;overflow-x:auto;scrollbar-width:none}
.dt-thumbs::-webkit-scrollbar{display:none}
.dt-thumbs img{width:52px;height:66px;object-fit:cover;flex:none;border:1px solid var(--line2);opacity:.55}
.dt-thumbs img.on{opacity:1;border-color:var(--ink)}