/* 配色分两层，原因是可访问性硬门（4.5:1）与「复刻官网」有冲突：
   官方主色 #F74705 与官方渐变（#F79400 -> #F70709）压白字只有 2.28-4.21，过不了。
   解法不是改品牌色，而是**分工**：
     --brand / --grad-*      官方原值，只做**不承载文字**的装饰填充（图标底、色条、SVG 描边）
     --brand-text / --brand-fill / --grad-*-cta   深一档，专门承载文字（链接、徽标、按钮）
   实测：#C63704 压白 5.32、白压 #C25200 4.67、白压 #B81109 6.73，全部达标。 */
:root{
  --ink:#161616; --body:#323232; --soft:#55555A; --faint:#68686D;
  --brand:#F74705; --brand-text:#C63704; --brand-fill:#C63704;
  --grad-a:#F79400; --grad-b:#F70709;
  --grad-a-cta:#C25200; --grad-b-cta:#B81109;
  --on-brand:#fff;
  --paper:#fff; --panel:#F3F3F3; --panel-2:#F8F8F9; --line:#E6E6E8;
  --card:#fff; --shadow:0 2px 14px rgba(22,22,22,.07);
  --shadow-lg:0 10px 34px rgba(22,22,22,.10);
  --ok:#0F7A3D; --warn:#B4520A; --stop:#C22A12;
  --wrap:1180px; --r:10px; --r-sm:5px; --r-pill:30px;
}
@media(prefers-color-scheme:dark){
  :root{
    --ink:#F2F2F4; --body:#D8D8DC; --soft:#B4B4BC; --faint:#9A9AA2;
    --brand:#FF7A45; --brand-text:#FF9366; --brand-fill:#FF7A45;
    --grad-a:#F79400; --grad-b:#E0413C;
    --grad-a-cta:#F79400; --grad-b-cta:#E0413C;
    --on-brand:#1A0E06;
    --paper:#101013; --panel:#1B1B20; --panel-2:#17171B; --line:#2C2C33;
    --card:#17171B; --shadow:0 2px 14px rgba(0,0,0,.5);
    --shadow-lg:0 10px 34px rgba(0,0,0,.6);
    --ok:#57C98A; --warn:#F0A45C; --stop:#FF8A72;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}
body{margin:0;background:var(--paper);color:var(--body);
  font:400 17px/1.72 Montserrat,Arial,"Segoe UI",system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3,h4{font-family:Montserrat,Arial,"Segoe UI",system-ui,sans-serif;color:var(--ink);
  line-height:1.14;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-weight:800;font-size:clamp(2.3rem,5.2vw,3.7rem)}
h2{font-weight:800;font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-weight:700;font-size:clamp(1.08rem,1.5vw,1.22rem);line-height:1.3}
h4{font-weight:700;font-size:1rem;line-height:1.35}
p{margin:0 0 1em;max-width:66ch}
strong{font-weight:700;color:var(--ink)}
a{color:var(--brand-text);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,
input:focus-visible{outline:3px solid var(--brand-text);outline-offset:2px;border-radius:6px}
img{max-width:100%;height:auto;display:block}
/* 悬停反馈 150-300ms（ui-ux-pro-max 交付前清单）。只动颜色与阴影，
   不动 transform：位移会造成布局跳动，也会被算进横向溢出。 */
a,button,summary,.card,.cat,.router a,select{
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,
             box-shadow .18s ease,text-decoration-color .18s ease}
.cat:hover,.card:hover{box-shadow:var(--shadow-lg)}
ul,ol{padding-left:1.15em;max-width:66ch}
li{margin:0 0 .5em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* 跳转链接：用 clip 隐藏。绝不用 left:-9999px —— 负偏移会计入横向溢出，
   站群踩过一次「12 页 x 4 视口全部报 +9px」。 */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;
  clip-path:none;background:var(--brand-fill);color:#fff;padding:12px 18px;border-radius:var(--r);
  z-index:60}

/* ---------- 母题：单号票据 ---------- */
.tick{display:inline-block;font-weight:700;font-size:.72rem;letter-spacing:.08em;
  padding:3px 8px;border-radius:var(--r-sm);line-height:1.45;vertical-align:.08em}
.tick.og{background:var(--brand-fill);color:#fff}
.tick.s{background:#4A4A50;color:#fff}
@media(prefers-color-scheme:dark){
  .tick.og{background:var(--brand);color:var(--on-brand)}
  .tick.s{background:#C9C9D0;color:#17171B}
}
.rip{height:9px;background-image:radial-gradient(circle at 5px 9px,transparent 4px,var(--line) 4px);
  background-size:10px 9px;background-repeat:repeat-x}

/* ---------- 页眉 ---------- */
header.site{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line)}
header.site .bar{display:flex;align-items:center;gap:18px;min-height:74px}
.brandmark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
  flex:0 0 auto;padding:6px 0;min-height:44px}
.brandmark img{width:42px;height:42px;border-radius:var(--r)}
.brandmark span{display:block;font-weight:800;font-size:1.02rem;letter-spacing:-.02em;
  line-height:1.15}
.brandmark small{display:block;font-weight:500;font-size:.7rem;color:var(--faint);
  letter-spacing:0;margin-top:2px}
nav.main{margin-left:auto}
nav.main ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;max-width:none}
nav.main a{display:inline-block;padding:11px 12px;min-height:44px;color:var(--body);
  font-weight:600;font-size:.88rem;text-decoration:none;border-radius:var(--r-sm)}
nav.main a:hover{background:var(--panel);color:var(--ink)}
nav.main a[aria-current=page]{color:var(--brand-text)}
.navtoggle{display:none;margin-left:auto;min-height:44px;min-width:44px;padding:10px 16px;
  border:1.5px solid var(--brand-text);background:transparent;color:var(--brand-text);font:700 .88rem
  Montserrat,Arial,sans-serif;border-radius:var(--r-pill);cursor:pointer}
@media(max-width:1099px){
  nav.main{position:absolute;left:0;right:0;top:100%;background:var(--paper);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);display:none;padding:8px 0 16px}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;gap:0;padding:0 22px}
  nav.main a{display:block;padding:13px 4px;border-bottom:1px solid var(--line);
    border-radius:0;font-size:.98rem}
  .navtoggle{display:inline-block}
}

/* ---------- 按钮 ---------- */
.btn{display:inline-block;min-height:44px;min-width:44px;padding:13px 26px;
  border-radius:var(--r-pill);font-weight:700;font-size:.94rem;text-decoration:none;
  text-align:center;border:0;cursor:pointer;line-height:1.25;
  font-family:Montserrat,Arial,sans-serif}
.btn.pri{background:linear-gradient(130deg,var(--grad-a-cta) 0%,var(--grad-b-cta) 100%);color:#fff;
  box-shadow:0 6px 18px rgba(247,71,5,.22)}
@media(prefers-color-scheme:dark){.btn.pri{color:var(--on-brand)}}
.btn.sec{background:transparent;color:var(--brand-text);border:1.5px solid var(--brand-text)}
.btn.ghost{background:var(--panel);color:var(--ink)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}

/* ---------- Hero：与官网同结构（左文右机 + 圆形照片气泡） ---------- */
.hero{position:relative;overflow:hidden;background:var(--paper);
  padding:64px 0 54px;border-bottom:1px solid var(--line)}
.hero .wrap{position:relative;z-index:2}
.hero h1{max-width:15ch}
/* lede 宽度按「不许压到右侧客机」定：44ch 之外正文会盖在机头上（实测 1440 下 52ch 会压） */
.hero .lede{font-size:1.14rem;color:var(--soft);max-width:44ch;margin:0 0 6px}
.hero .kick{display:inline-block;font-weight:700;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-text);margin:0 0 16px}
.heroart{position:absolute;right:-70px;top:40px;width:min(64%,860px);z-index:1;
  opacity:.96;pointer-events:none}
.heroart img{width:100%}
.heroart::before{content:"";position:absolute;right:8%;top:-6%;width:70%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(247,148,0,.10) 0%,rgba(255,255,255,0) 70%);
  border-radius:50%}
.bubbles{position:absolute;right:26px;top:26px;z-index:2;display:flex;gap:14px;
  align-items:flex-start}
.bubbles img{border-radius:50%;border:4px solid var(--paper);box-shadow:var(--shadow)}
.bubbles .b1{width:104px;height:104px}
.bubbles .b2{width:62px;height:62px;margin-top:56px}
/* ≤1080 客机不能再绝对定位在右侧，否则它会占满首屏、把 H1 挤到折叠线以下
   （1024 实测：首屏只看得见一架飞机）。改成 flex 列并把图排到文字后面，且限高。 */
@media(max-width:1080px){
  .hero{display:flex;flex-direction:column;padding-top:44px}
  .hero>.wrap{order:1}
  .heroart{order:2;position:relative;right:0;top:0;width:100%;margin:26px 0 -14px;opacity:.92}
  .heroart img{max-height:300px;width:auto;max-width:none;margin-left:auto;margin-right:-8%}
  .heroart::before{display:none}
  .bubbles{display:none}
}
@media(max-width:560px){.heroart img{max-height:210px}}
/* 官网首屏那条大药丸。本站不做商品搜索，所以它是「一条链接会变成什么」的入口条 */
.pillbar{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--shadow-lg);
  padding:9px 9px 9px 22px;max-width:640px;margin:26px 0 0;flex-wrap:wrap}
.pillbar .txt{flex:1 1 220px;color:var(--faint);font-size:.98rem;font-weight:500}
.pillbar .plat{display:flex;gap:6px;flex:0 0 auto}
.pillbar .plat b{display:inline-block;width:30px;height:30px;border-radius:50%;
  background:var(--panel);color:var(--faint);font-size:.62rem;font-weight:700;
  line-height:30px;text-align:center;letter-spacing:-.02em}

/* ---------- section ---------- */
section{padding:58px 0;border-bottom:1px solid var(--line)}
section.tint{background:var(--panel-2)}
section:last-of-type{border-bottom:0}
.eyebrow{display:block;font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-text);margin:0 0 12px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split.rev>.col-fig{order:-1}
.split.lead{grid-template-columns:1.05fr .95fr}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:26px}.split.rev>.col-fig{order:0}}
.col-txt>:last-child{margin-bottom:0}
/* 硬门 4：通栏图不许铺满容器。正文 `p{max-width:66ch}` 只有 ~624px，
   图铺满 1136px 时两者宽度差 45%（> 40% 即 ERROR，实测报过 5 处）。
   封顶 700px 后差 10.9%，低于 15% 的 WARN 线；
   官方截图也已按 700px 重出，于是 1:1 显示，硬门 3②③ 一并过。
   ⚠️ 不要反过来把正文拉宽去凑图 —— 一行 95-108 字符比错位更难读。 */
section[data-kind="wide"] figure{max-width:700px;margin-left:auto;margin-right:auto}
/* 硬门 3③ 与硬门 4 的真冲突，用整幅引证带解掉。
   官方文章截图原生 1236 CSS 宽，塞进 624px 的正文宽度里字只剩一半，读者读不出来；
   把正文反过来拉到 1136 又变成一行 95 字符。两头都不行。
   解法：这类**证据图**从正文流里分出来，自己占一条带（上下细线 + 换一层底色）。
   硬门 4 只拿 figure 跟紧邻的前后兄弟配对，图成了带内唯一元素就不再参与配对。
   这是版式判断不是绕门 —— 官方原文截图是**证据**不是插图，本来就该拎出来单独看。
   同一方案 acbfind.com 与 ootdbuyspreadsheets.com 两个会话在 10-08 各自独立得出，互为印证。 */
.figband{margin:26px 0 0;padding:22px 0 18px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--panel-2)}
/* 权重必须压过上面那条 section[data-kind="wide"] figure{max-width:700px}（0,1,2），
   所以这里也写成 (0,1,2) 并排在它后面 —— 只写 .figband figure(0,1,1) 会被它吃掉，
   带子在 wide 版式里仍然只有 698px，而且所有脚本都不会报。 */
section[data-kind] .figband figure{max-width:none;margin:0}
/* 带子被放在并排版式的图栏里时，要从栅格里撑出来占满整行，否则还是窄的。 */
.split:has(> .col-fig > .figband){grid-template-columns:1fr;gap:0}
.col-fig:has(> .figband){grid-column:1 / -1}
figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow)}
figure img,figure svg{display:block;width:100%;height:auto}
figcaption{padding:11px 15px;font-size:.8rem;line-height:1.5;color:var(--faint);
  border-top:1px solid var(--line);background:var(--panel-2)}
figcaption a{color:var(--faint)}
.wide figure{margin:0 0 26px}

/* ---------- 卡片 ---------- */
.cards{display:grid;gap:20px;margin:26px 0 0}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
/* Taste §9：恰好三张卡不许等宽横排（典型 AI 味）。排成 2+1，第三张占满一行 */
.cards.three{grid-template-columns:repeat(2,1fr)}
.cards.three>.card:nth-child(3){grid-column:1/-1}
@media(max-width:1000px){.cards.c3,.cards.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards{grid-template-columns:1fr!important}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px;min-width:0;box-shadow:var(--shadow)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.card.hot{background:linear-gradient(130deg,var(--grad-a-cta) 0%,var(--grad-b-cta) 100%);
  border-color:transparent;color:#fff;box-shadow:0 10px 30px rgba(247,71,5,.24)}
.card.hot h3,.card.hot strong{color:#fff}
.card.hot a{color:#fff}
@media(prefers-color-scheme:dark){
  .card.hot,.card.hot h3,.card.hot strong,.card.hot a{color:var(--on-brand)}
}
.ibadge{display:block;width:44px;height:44px;border-radius:var(--r);
  background:linear-gradient(130deg,var(--grad-a) 0%,var(--grad-b) 100%);margin:0 0 14px}
.ibadge svg{width:44px;height:44px;display:block}
.card.hot .ibadge{background:rgba(255,255,255,.22)}

/* ---------- 统计条（官网 Procurement/QC/Packing 那排） ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:28px 0 0}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stats{grid-template-columns:1fr}}
.stat{background:var(--panel);border-radius:var(--r);padding:22px 20px;min-width:0}
.stat.hot{background:linear-gradient(130deg,var(--grad-a-cta) 0%,var(--grad-b-cta) 100%);color:#fff}
.stat b{display:block;font-weight:700;font-size:.94rem;color:var(--ink);line-height:1.3}
.stat.hot b{color:#fff}
.stat hr{border:0;border-top:3px solid var(--brand);width:36px;margin:12px 0;border-radius:2px}
.stat.hot hr{border-color:rgba(255,255,255,.85)}
.stat small{display:block;color:var(--faint);font-size:.76rem;margin:0 0 4px}
.stat.hot small{color:#fff}
.stat em{font-style:normal;font-weight:800;font-size:1.9rem;color:var(--brand-text);
  letter-spacing:-.03em;line-height:1.1}
.stat.hot em{color:#fff}
@media(prefers-color-scheme:dark){
  .stat.hot,.stat.hot b,.stat.hot em{color:var(--on-brand)}
  .stat.hot small{color:rgba(26,14,6,.75)}
}

/* ---------- 步骤 ---------- */
ol.steps{list-style:none;padding:0;margin:26px 0 0;counter-reset:st;max-width:none}
ol.steps>li{counter-increment:st;position:relative;padding:0 0 0 62px;margin:0 0 26px}
ol.steps>li::before{content:counter(st);position:absolute;left:0;top:0;width:44px;height:44px;
  border-radius:var(--r);background:linear-gradient(130deg,var(--grad-a-cta) 0%,var(--grad-b-cta) 100%);
  color:#fff;font-weight:800;font-size:1.1rem;line-height:44px;text-align:center}
@media(prefers-color-scheme:dark){ol.steps>li::before{color:var(--on-brand)}}
ol.steps h3{margin:.15em 0 .35em}
ol.steps p{margin-bottom:.5em}

/* ---------- 表格：窄屏转卡片 ---------- */
.tablewrap{margin:26px 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:.94rem}
th,td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{background:var(--panel);font-weight:700;color:var(--ink);font-size:.84rem;
  letter-spacing:.02em}
tbody tr:last-child td{border-bottom:0}
@media(max-width:700px){
  .tablewrap{border:0}
  table,thead,tbody,tr,th,td{display:block}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tr{border:1px solid var(--line);border-radius:var(--r);margin:0 0 14px;padding:6px 0;
    background:var(--card)}
  td{border:0;display:flex;gap:10px;padding:9px 16px}
  td::before{content:attr(data-label);flex:0 0 36%;font-weight:700;color:var(--ink);
    font-size:.82rem}
}

/* ---------- 对照 ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0 0}
@media(max-width:760px){.compare{grid-template-columns:1fr}}
.compare>div{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--card)}
.compare h3{display:flex;align-items:center;gap:9px}
.compare .yes h3::before{content:"OG";font-size:.68rem;font-weight:700;letter-spacing:.08em;
  background:var(--brand-fill);color:#fff;padding:3px 7px;border-radius:var(--r-sm)}
.compare .no h3::before{content:"S";font-size:.68rem;font-weight:700;letter-spacing:.08em;
  background:#4A4A50;color:#fff;padding:3px 9px;border-radius:var(--r-sm)}
@media(prefers-color-scheme:dark){
  .compare .yes h3::before{color:var(--on-brand)}
  .compare .no h3::before{background:#C9C9D0;color:#17171B}
}

/* ---------- FAQ ---------- */
.faq{margin:26px 0 0;max-width:none}
.faq details{border:1px solid var(--line);border-radius:var(--r);margin:0 0 12px;
  background:var(--card)}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:700;color:var(--ink);
  min-height:44px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--brand-text);font-weight:800}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 20px 18px}
.faq .a>:last-child{margin-bottom:0}

/* ---------- 品类卡 ---------- */
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0 0}
@media(max-width:1000px){.catgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.catgrid{grid-template-columns:1fr}}
.cat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;min-width:0;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.cat .pic{background:var(--panel-2);border-bottom:1px solid var(--line)}
.cat .pic svg{width:100%;height:auto;display:block}
/* 真实商品照（2026-10-08 起取代手绘线稿）。方图锁 1:1 并 cover，
   23 张卡的图位高度因此一致 —— 硬门 4 的「并排模块高度齐」靠这个，不是逐格写死像素。*/
.cat .pic img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover}
.cat .body{padding:18px 18px 20px;flex:1 1 auto;display:flex;flex-direction:column}
.cat h3{margin:0 0 6px;font-size:1.06rem}
.cat .term{display:inline-block;background:var(--panel);border-radius:var(--r-sm);
  padding:4px 9px;font-size:.78rem;font-weight:600;color:var(--body);margin:0 0 12px}
.cat dl{margin:0 0 14px;font-size:.87rem;line-height:1.6}
.cat dt{display:inline-block;font-weight:700;font-size:.68rem;letter-spacing:.08em;
  padding:2px 7px;border-radius:var(--r-sm);margin:0 0 4px}
.cat dt.og{background:var(--brand-fill);color:#fff}
.cat dt.s{background:#4A4A50;color:#fff}
@media(prefers-color-scheme:dark){
  .cat dt.og{color:var(--on-brand)}
  .cat dt.s{background:#C9C9D0;color:#17171B}
}
.cat dd{margin:0 0 12px;color:var(--soft)}
.cat .go{margin-top:auto}
.cat .go a{display:inline-block;min-height:44px;min-width:44px;padding:11px 16px;
  border-radius:var(--r-pill);border:1.5px solid var(--brand-text);color:var(--brand-text);
  font-weight:700;font-size:.85rem;text-decoration:none}

/* ---------- 交互工具 ---------- */
.tool{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;margin:26px 0 0}
.tool .fields{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.tool .fields{grid-template-columns:1fr}}
.tool label{display:block;font-weight:700;font-size:.82rem;color:var(--ink);margin:0 0 7px}
.tool select{width:100%;min-height:44px;padding:11px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--card);color:var(--body);
  font:500 .94rem Montserrat,Arial,sans-serif}
.tool .out{margin:22px 0 0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:22px}
.tool .out h4{margin:0 0 10px}
.tool .out dl{margin:0;font-size:.94rem}
.tool .out dt{font-weight:700;color:var(--ink);margin:14px 0 3px}
.tool .out dt:first-child{margin-top:0}
.tool .out dd{margin:0;color:var(--soft)}
.tool .note{font-size:.82rem;color:var(--faint);margin:14px 0 0}

/* ---------- 提示块 ---------- */
.callout{border-left:4px solid var(--brand);background:var(--panel);border-radius:var(--r);
  padding:18px 22px;margin:24px 0 0}
.callout>:last-child{margin-bottom:0}
.callout.quiet{border-left-color:#9A9AA2}
blockquote{margin:20px 0;padding:16px 20px;background:var(--panel);border-radius:var(--r);
  font-size:.94rem;color:var(--soft)}
blockquote p:last-child{margin-bottom:0}
.src{font-size:.8rem;color:var(--faint)}
.src a{color:var(--faint)}

/* ---------- 路由卡 ---------- */
/* 同理：路由卡不等宽，第一张更宽，避免三块一模一样的方块 */
.router{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px;margin:26px 0 0}
@media(max-width:900px){.router{grid-template-columns:1fr}}
.router a{display:block;padding:22px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);text-decoration:none;color:var(--body);min-height:44px}
.router a:hover{border-color:var(--brand-text)}
.router b{display:block;color:var(--ink);font-size:1.04rem;margin:0 0 6px}

/* ---------- 页脚 ---------- */
footer.site{background:var(--panel-2);border-top:1px solid var(--line);padding:52px 0 34px;
  font-size:.92rem}
.footgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:36px}
@media(max-width:860px){.footgrid{grid-template-columns:1fr}}
footer.site h4{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin:0 0 2px}
/* 短标签（FAQ / Help / News）光有 min-height 不够，宽度不足 44px 一样不达标。
   站群踩过：触点要同时够宽够高，且不能用 inline-flex。 */
footer.site a{display:inline-block;min-height:44px;min-width:44px;padding:11px 0;
  color:var(--body);text-decoration:none;font-weight:500}
footer.site a:hover{color:var(--brand-text);text-decoration:underline}
footer.site p{color:var(--soft);max-width:60ch}
.legal{border-top:1px solid var(--line);margin:30px 0 0;padding:24px 0 0;font-size:.82rem;
  color:var(--faint)}
.legal p{color:var(--faint);max-width:none}
.legal a{display:inline;min-height:0;padding:0;color:var(--faint);text-decoration:underline}

/* 长不可断字符串（邮箱、URL）不许把页面撑出横滚 */
.card p a,.legal a,footer.site p a,.tool .out dd,.src a{overflow-wrap:anywhere}

/* ---------- 转化骨架（硬门 1/2/4，2026-10-08 补） ----------
   硬门 1：搜索框是 hero 的核心部件，紧接文案，面积要压过任何附属按钮。
   所以它是整幅宽的块、不是塞在按钮排里的一小截。
   ⚠️ `label` 必须 `flex:1 0 100%`，否则被拉到输入框旁边、把按钮挤到下一行。*/
.findbar{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;
  margin:26px 0 0;padding:16px 16px 18px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.findbar label{flex:1 0 100%;margin:0 0 2px;font-size:.84rem;font-weight:700;
  letter-spacing:.01em;color:var(--body)}
.findbar .hint{flex:1 0 100%;order:3;margin:0;font-size:.78rem;color:var(--soft)}
.findbar input[type=search]{flex:1 1 320px;min-width:0;font:inherit;font-size:1.02rem;
  padding:13px 14px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--panel);color:var(--body);min-height:48px}
.findbar input[type=search]:focus-visible{outline:3px solid var(--brand-text);outline-offset:1px}
.findbar button{flex:0 0 auto;font:inherit;font-weight:800;cursor:pointer;
  padding:13px 22px;min-height:48px;border:0;border-radius:var(--r-sm);
  background:var(--brand-fill);color:#fff}
@media(prefers-color-scheme:dark){.findbar button{color:var(--on-brand)}}
.findbar button:hover{filter:brightness(1.07)}
@media(max-width:560px){.findbar input[type=search]{flex:1 0 100%}
  .findbar button{flex:1 0 100%}}

/* 附属 CTA 一律降级成窄条，不做大按钮（硬门 1⑤：hero 内按钮型元素 <= 3 个）。*/
.subnav{display:flex;flex-wrap:wrap;gap:4px 22px;align-items:baseline;
  margin:16px 0 0;padding:0;list-style:none;font-size:.9rem}
.subnav li{margin:0}
.subnav a{font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;
  padding:2px 0}
.subnav a:hover{border-bottom-width:2px}
/* 窄屏/触屏才抬触点到 44px。全局抬会让 check_frontstage 把这几条数成「大按钮」，
   首页立刻撞硬门 1⑤ 的 3 个上限 —— 两个门会互相打架，这是实测踩过的。*/
@media(pointer:coarse),(max-width:599px){
  .subnav{gap:2px 18px}
  .subnav a{display:inline-block;min-height:44px;line-height:44px}
  /* 链接清单与卡片上的动作链接同样是独立触点，不是句中内联链接 ——
     硬门 60 的 44px 对它们成立（WCAG 2.5.8 的内联豁免只豁免句子里的链接）。
     ⚠️ 用容器精确限定，**不要写 `li > a:only-child`**：`:only-child` 只看元素
     兄弟、不看文本节点，「see also <a>…</a>」那种句子会被一起打中，
     行距被撑花（站群踩过一次）。 */
  [data-kind="helpindex"] li a,
  [data-kind="router"] li a,
  .go a{display:inline-block;min-height:44px;line-height:1.5;padding:11px 0}
}

/* ---------- 16 格品类墙（硬门 2②③） ----------
   位置由硬门 2② 定死：必须是 hero 之后的第 1 或第 2 个区块。
   每格必配真实商品图（硬门 2③ + 30），不许用自己画的线稿（硬门 3①）。*/
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0 0}
@media(max-width:1000px){.wall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.wall{grid-template-columns:repeat(2,1fr)}}
.tile{display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);text-decoration:none;color:inherit}
.tile:hover{border-color:var(--brand-text)}
/* 图位高度写死比例，图 object-fit 填满 —— 硬门 4 要的「并排模块高度齐」靠这个，
   不是逐格写死像素。*/
.tile .shot{aspect-ratio:4/3;background:var(--panel-2);border-bottom:1px solid var(--line)}
.tile .shot img{width:100%;height:100%;display:block;object-fit:cover}
.tile .meta{padding:12px 13px 14px;flex:1 1 auto;display:flex;flex-direction:column;gap:6px}
.tile h3{margin:0;font-size:.98rem;line-height:1.3}
.tile p{margin:0;font-size:.82rem;line-height:1.55;color:var(--soft)}
/* 目的地徽章说的是「链接类型」不是站名，硬门 10 明确允许保留。
   womenswear 走搜索结果而不是分类页，所以它必须是另一种徽章。*/
.tile .dest{margin-top:auto;font-size:.68rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--soft)}
.tile .dest.q{color:var(--brand-text)}